/* ============================================================
   NFC kart tasarımı (Kartını tasarla + panel önizleme)
   Kart oranı ISO/IEC 7810 ID-1: 85.6 × 54 mm
   ============================================================ */
.dc{--bg:#111322;--fg:#ffffff;--ac:#7c6cff;--lx:30%;--ly:20%;
  position:relative;width:100%;aspect-ratio:85.6/54;container-type:inline-size;border-radius:3.8% / 6%;font-family:'Instrument Sans','Inter',system-ui,sans-serif}
.dc.dc-o-v{aspect-ratio:54/85.6;border-radius:6% / 3.8%}
.dc-face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;color:var(--fg);background:var(--bg);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(0,0,0,.08);-webkit-font-smoothing:antialiased}
.dc-sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;mix-blend-mode:soft-light;
  background:radial-gradient(120% 90% at var(--lx) var(--ly),rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
.dc-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;border-radius:inherit}

/* Malzemeler */
.dc-m-gloss .dc-sheen{mix-blend-mode:screen;background:radial-gradient(70% 60% at var(--lx) var(--ly),rgba(255,255,255,.42),rgba(255,255,255,0) 60%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 45%,transparent 55%)}
.dc-m-matte .dc-sheen{opacity:.45}
.dc-m-gold .dc-face{background:linear-gradient(125deg,#9b6c1c,#e9c766 22%,#b78a2f 40%,#f6e3a1 58%,#c0912f 76%,#8c611a)}
.dc-m-silver .dc-face{background:linear-gradient(125deg,#7d828c,#e6e9ee 22%,#a3a8b1 40%,#f6f7f9 58%,#b1b5bd 76%,#73777f)}
.dc-m-rose .dc-face{background:linear-gradient(125deg,#a5675a,#f0c4b4 22%,#c38a7a 40%,#fbdcd0 58%,#c79080 76%,#97594d)}
.dc-m-gold .dc-grain,.dc-m-silver .dc-grain,.dc-m-rose .dc-grain{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.05) 1px 2px);mix-blend-mode:overlay;opacity:1}
.dc-m-gold .dc-sheen,.dc-m-silver .dc-sheen,.dc-m-rose .dc-sheen{mix-blend-mode:overlay;background:radial-gradient(80% 70% at var(--lx) var(--ly),rgba(255,255,255,.9),rgba(255,255,255,0) 60%)}
.dc-m-wood .dc-face{background:linear-gradient(100deg,#c9955c,#ddb07a 30%,#c08a52 55%,#d8a96f 80%,#b98249)}
.dc-m-wood .dc-grain{opacity:.55;mix-blend-mode:multiply;background:
  repeating-radial-gradient(ellipse 140% 18% at 30% 120%,rgba(110,62,20,.0) 0 2.2cqw,rgba(110,62,20,.35) 2.4cqw,rgba(110,62,20,0) 2.8cqw),
  repeating-linear-gradient(178deg,rgba(120,70,25,.12) 0 .5cqw,transparent .5cqw 1.6cqw)}
.dc-m-carbon .dc-face{background-color:#16171c;background-image:linear-gradient(45deg,#1f2026 25%,transparent 25%,transparent 75%,#1f2026 75%),linear-gradient(45deg,#1f2026 25%,transparent 25%,transparent 75%,#1f2026 75%);background-size:1.6cqw 1.6cqw;background-position:0 0,.8cqw .8cqw}
.dc-m-clear .dc-face{background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.08));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.45) inset}
.dc-m-clear .dc-sheen{mix-blend-mode:screen}
/* Gravür etkisi: metal ve ahşapta yazı hafif oyuk görünür */
.dc-m-gold .dc-txt,.dc-m-silver .dc-txt,.dc-m-rose .dc-txt,.dc-m-wood .dc-txt,.dc-m-gold .dc-back-tx,.dc-m-silver .dc-back-tx,.dc-m-rose .dc-back-tx,.dc-m-wood .dc-back-tx{text-shadow:0 .12cqw 0 rgba(255,255,255,.35),0 -.08cqw 0 rgba(0,0,0,.25)}

/* Ön yüz */
.dc-front{display:flex;flex-direction:column;justify-content:space-between;padding:7cqw 7.5cqw}
.dc-logo{height:13cqw;display:flex;align-items:center}
.dc-logo img{max-height:100%;max-width:46cqw;object-fit:contain;display:block}
.dc-logo .dc-mask{display:block;height:100%;width:40cqw;background:var(--fg);-webkit-mask:var(--logo) left center/contain no-repeat;mask:var(--logo) left center/contain no-repeat}
.dc-mono{height:13cqw;aspect-ratio:1;border-radius:3cqw;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:5.6cqw;letter-spacing:-.02em;background:var(--ac);color:var(--monofg,#fff)}
.dc-txt{display:flex;flex-direction:column;gap:.9cqw;min-width:0}
.dc-name{font-family:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;font-size:6.6cqw;line-height:1.05;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-title{font-size:3.5cqw;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-co{font-size:3.1cqw;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ac);margin-top:1.4cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-nfc{position:absolute;right:7cqw;top:7.5cqw;font-size:5cqw;opacity:.85}
.dc-bar{position:absolute;left:0;top:0;bottom:0;width:1.6cqw;background:var(--ac)}
.dc-l-left .dc-bar{display:none}
.dc-l-center .dc-front{align-items:center;text-align:center;justify-content:center;gap:6cqw}
.dc-l-center .dc-logo{justify-content:center}
.dc-l-center .dc-logo .dc-mask{-webkit-mask-position:center;mask-position:center}
.dc-l-center .dc-txt{align-items:center}
.dc-l-center .dc-bar{display:none}
.dc-l-bar .dc-front{padding-left:10cqw}
/* Dikey */
.dc-o-v .dc-front{padding:10cqw 10cqw 12cqw}
.dc-o-v .dc-logo{height:20cqw}
.dc-o-v .dc-logo img{max-width:70cqw}
.dc-o-v .dc-logo .dc-mask{width:62cqw}
.dc-o-v .dc-mono{height:20cqw;font-size:8.6cqw;border-radius:5cqw}
.dc-o-v .dc-name{font-size:10cqw;white-space:normal}
.dc-o-v .dc-title{font-size:5.4cqw;white-space:normal}
.dc-o-v .dc-co{font-size:4.6cqw}
.dc-o-v .dc-nfc{right:10cqw;top:11cqw;font-size:7.6cqw}
.dc-o-v .dc-bar{width:2.4cqw}
.dc-o-v.dc-l-bar .dc-front{padding-left:14cqw}

/* Arka yüz */
.dc-back{display:flex;align-items:center;justify-content:center;gap:6cqw;padding:7cqw}
.dc-qr{width:30cqw;aspect-ratio:1;background:#fff;border-radius:2.6cqw;padding:2cqw;flex:none}
.dc-qr svg{display:block;width:100%;height:100%}
.dc-back-tx{display:flex;flex-direction:column;gap:1.4cqw;min-width:0;max-width:44cqw}
.dc-back-tx b{font-size:4.2cqw;font-weight:700;line-height:1.2}
.dc-back-tx span{font-size:3.2cqw;opacity:.8;word-break:break-word}
.dc-back-tx em{font-style:normal;display:inline-flex;align-items:center;gap:1.4cqw;font-size:3cqw;font-weight:600;color:var(--ac);margin-top:1cqw}
.dc-back .dc-biglogo{display:none;height:24cqw;max-width:60cqw}
.dc-back .dc-biglogo img{height:100%;max-width:100%;object-fit:contain}
.dc-back .dc-biglogo .dc-mask{display:block;height:100%;width:60cqw;background:var(--fg);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.dc-back .dc-biglogo .dc-mono{height:24cqw;font-size:10cqw;border-radius:5cqw}
.dc-b-logo .dc-back{flex-direction:column;gap:4cqw}
.dc-b-logo .dc-back .dc-qr{display:none}
.dc-b-logo .dc-back .dc-biglogo{display:flex;justify-content:center}
.dc-b-logo .dc-back-tx{align-items:center;text-align:center;max-width:none}
.dc-b-logo .dc-back-tx b{display:none}
.dc-b-pattern .dc-back{background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fg) 22%,transparent) .45cqw,transparent .5cqw);background-size:4cqw 4cqw}
.dc-b-pattern .dc-back .dc-qr{display:none}
.dc-b-pattern .dc-back .dc-biglogo{display:flex}
.dc-b-pattern .dc-back{flex-direction:column}
.dc-b-pattern .dc-back-tx{display:none}
.dc-o-v .dc-back{flex-direction:column;gap:7cqw;text-align:center}
.dc-o-v .dc-qr{width:52cqw}
.dc-o-v .dc-back-tx{align-items:center;max-width:none}
.dc-o-v .dc-back-tx b{font-size:6.4cqw}
.dc-o-v .dc-back-tx span,.dc-o-v .dc-back-tx em{font-size:5cqw}
.dc-o-v .dc-back .dc-biglogo{height:34cqw;max-width:76cqw}

/* 3B sahne */
.dc3d{perspective:1400px;width:100%}
.dc3d .dc{transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1);will-change:transform}
.dc3d .dc.dragging{transition:none}
.dc3d .dc-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dc3d .dc-back{transform:rotateY(180deg)}
.dc3d .dc-edge{position:absolute;inset:0;border-radius:inherit;transform:translateZ(-1.2px);background:#0006;filter:blur(.5px)}
.dc3d .dc-shadow{position:absolute;left:8%;right:8%;bottom:-14%;height:16%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%);filter:blur(8px);transform:translateZ(-60px) rotateX(90deg);pointer-events:none}

/* Statik (panel önizleme) */
.dc-static{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.dc-static .dc{transform:none!important}
.dc-static .dc-wrap{display:flex;flex-direction:column;gap:6px}
.dc-static .dc-wrap>small{color:#666b88;font-size:12px;font-weight:600}
.dc-thumb{width:150px;pointer-events:none}
@media (max-width:600px){.dc-static{grid-template-columns:minmax(0,1fr)}}