/* Kartu pratinjau kecil template (dipakai aplikasi & galeri web) */
.mc { aspect-ratio: 3 / 4.3; border-radius: 18px; position: relative; overflow: hidden; background: linear-gradient(165deg, var(--bg), var(--bg2)); color: var(--tx);
  display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 34px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px -14px rgba(0,0,0,.35); }
.mc svg { width: 100%; height: 100%; display: block; }
.mc-em { width: 26px; height: 26px; z-index: 2; }
.mc-n { font-family: var(--fs); font-size: 1.2rem; line-height: 1.15; color: var(--a); z-index: 2; padding: 0 10px; margin-top: 2px; }
.mc-toon { width: 100%; height: 100%; }
.mc-mo { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; opacity: .85; z-index: 1; }
.mc .chip, .mc .tag { z-index: 4; }

/* Classic: bingkai lengkung */
.mcl-classic::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--a); border-radius: 12px; opacity: .45; }
.mc-arch { position: absolute; left: 22%; right: 22%; bottom: 14%; height: 44%; border-radius: 999px 999px 10px 10px; overflow: hidden; z-index: 2;
  background: color-mix(in srgb, var(--a2) 40%, var(--bg)); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--a); }
.mc-arch .mc-toon { padding-top: 10%; }

/* Elegant: ilustrasi penuh, teks di bawah */
.mcl-elegant { padding: 0; justify-content: flex-end; }
.mc-full { position: absolute; inset: 0 0 30% 0; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--a2) 50%, var(--bg)), var(--bg2)); }
.mc-full .mc-toon { padding-top: 18%; }
.mc-shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 32%, transparent 60%); }
.mc-bot { position: relative; z-index: 2; padding: 0 10px 16px; }
.mc-k { font-size: .48rem; letter-spacing: .25em; text-transform: uppercase; opacity: .7; }
.mcl-elegant .mc-n { font-family: var(--fh); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; color: var(--tx); }

/* Bloom: lingkaran dengan karangan bunga */
.mc-bloom { position: relative; width: 74%; aspect-ratio: 1; margin-top: 6px; display: grid; place-items: center; z-index: 2; }
.mc-ring { position: absolute; inset: 0; }
.mc-circle { width: 66%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--a2) 40%, var(--bg)); border: 3px solid var(--bg); }
.mc-circle .mc-toon { padding-top: 12%; }

/* Modern: ilustrasi di atas, nama besar rata kiri */
.mcl-modern { padding: 0; align-items: stretch; text-align: left; }
.mc-top { height: 55%; background: linear-gradient(160deg, color-mix(in srgb, var(--a2) 45%, var(--bg)), var(--bg2)); }
.mc-top .mc-toon { padding-top: 8%; }
.mc-txt { padding: 10px 12px; }
.mcl-modern .mc-n { font-family: var(--fh); font-weight: 700; text-transform: uppercase; color: var(--tx); font-size: .95rem; line-height: 1.05; padding: 0; }
.mc-txt i { display: block; width: 26px; height: 3px; background: var(--a); border-radius: 3px; margin-top: 8px; }

/* Royal: bingkai ganda + medali oval */
.mc-royal { position: absolute; inset: 7px; border: 2px solid var(--a); }
.mc-royal::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--a2); }
.mc-royal ~ .mc-em { width: 34px; height: 34px; }
.mc-royal ~ .mc-n { font-family: var(--fh); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.mc-oval { width: 46%; aspect-ratio: 3 / 3.8; margin-top: 8px; border-radius: 50%; overflow: hidden; z-index: 2; background: color-mix(in srgb, var(--a2) 40%, var(--bg));
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--a), 0 0 0 7px var(--bg), 0 0 0 8px var(--a2); }
.mc-oval .mc-toon { padding-top: 14%; }

/* Dreamy: polaroid miring */
.mcl-dreamy { padding-top: 26px; }
.mc-blob { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; top: -14%; left: -18%; background: var(--a2); filter: blur(18px); opacity: .6; }
.mc-pol { width: 60%; background: #fff; padding: 5px 5px 16px; transform: rotate(-5deg); box-shadow: 0 8px 18px -8px rgba(0,0,0,.45); z-index: 2; }
.mc-pol .mc-toon { aspect-ratio: 1 / 1.05; height: auto; background: linear-gradient(160deg, color-mix(in srgb, var(--a2) 45%, #fff), color-mix(in srgb, var(--a) 20%, #fff)); }
.mcl-dreamy .mc-n { margin-top: 8px; }

/* Classic: panel kertas melengkung + bentuk bingkai foto */
.mcl-classic { padding-top: 10px; }
.mc-panel { position: relative; z-index: 2; width: 82%; height: 86%; border-radius: 999px 999px 14px 14px; background: var(--bg); border: 1.5px solid color-mix(in srgb, var(--a) 60%, transparent);
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px color-mix(in srgb, var(--a) 40%, transparent), 0 14px 24px -12px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; padding-top: 16%; }
.mc-panel .mc-arch { position: relative; left: auto; right: auto; bottom: auto; width: 58%; height: 46%; margin-top: 8px; }
.mc-fr-oval { border-radius: 50% !important; } .mc-fr-circle { border-radius: 50% !important; height: auto !important; aspect-ratio: 1; width: 60% !important; }
.mc-fr-rounded { border-radius: 12px !important; } .mc-fr-framed { border-radius: 2px !important; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--a) !important; }
.mc-fr-hexagon { border-radius: 0 !important; clip-path: polygon(25% 2%, 75% 2%, 99% 50%, 75% 98%, 25% 98%, 1% 50%); box-shadow: none !important; width: 66% !important; }

/* Portrait & Minimal: foto penuh */
.mcl-portrait, .mcl-minimal { padding: 0; justify-content: flex-start; }
.mcl-portrait .mc-full, .mcl-minimal .mc-full { inset: 0; }
.mcl-portrait .mc-full .mc-toon, .mcl-minimal .mc-full .mc-toon { padding-top: 32%; }
.mc-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 60%, transparent), transparent 30%, transparent 65%, color-mix(in srgb, var(--bg) 50%, transparent)); }
.mc-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 6%, transparent 34%, transparent 70%, var(--bg) 96%); }
.mc-ptop { position: relative; z-index: 2; margin-top: 26%; }
.mcl-portrait .mc-n { font-size: 1.15rem; white-space: nowrap; }
.mcl-minimal .mc-n { font-family: var(--fh); text-transform: uppercase; color: var(--tx); font-size: .8rem; letter-spacing: .06em; }
.mc-glass, .mc-dear { position: absolute; left: 18%; right: 18%; bottom: 17%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; }
.mc-glass { background: rgba(255,255,255,.7); border-radius: 8px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.35); }
.mc-glass i, .mc-dear i { display: block; height: 3px; width: 70%; border-radius: 3px; background: color-mix(in srgb, var(--tx) 45%, transparent); }
.mc-glass i:last-child, .mc-dear i:last-child { width: 45%; background: var(--a); }
.mc-pill { position: absolute; bottom: 8%; left: 34%; right: 34%; height: 9px; border-radius: 99px; background: var(--a); z-index: 2; }
.mc-pill.dark { background: var(--tx); }