/*
 * Q-R.com.tr — Fiziksel NFC kart tasarımları (10 standart PVC + 10 metal).
 * Kart ölçüsü ID-1: 85,6 × 54 mm. Tüm ölçüler kart genişliğine bağlı (em),
 * böylece aynı tasarım küçük önizlemede de, gerçek boyutta baskıda da aynı görünür.
 * Kart = 25em genişlik × ~15,8em yükseklik.
 * Kullanım: <div class="pcd-frame"> @include('cards.physical.face', [...]) </div>
 */

.pcd-frame { container-type: inline-size; width:100%; }

.pcd {
    --sans: 'Geist', system-ui, sans-serif;
    --display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
    --mono: 'Geist Mono', ui-monospace, monospace;
    --serif: 'Newsreader', Georgia, serif;
    --soft: 'Fraunces', Georgia, serif;
    --stencil: 'Bebas Neue', 'Geist', sans-serif;
    position: relative;
    width:100%;
    aspect-ratio: 85.6 / 54;
    border-radius: 3.6cqw;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--sans);
    font-size: 4cqw;
    line-height: 1.2;
    color: #111;
    box-shadow: 0 1.2cqw 3.6cqw -1.4cqw rgba(10, 12, 20, .45), 0 0 0 .25cqw rgba(0, 0, 0, .04);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
.pcd *, .pcd *::before, .pcd *::after { box-sizing: border-box; margin: 0; padding: 0; }
.pcd .who b, .pcd .mast b, .pcd .glass b, .pcd .spec b, .pcd .vname b { white-space: nowrap; }
.pcd .fit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcd-qr { display: block; }
.pcd-qr svg, .pcd .pcd-qr-svg { display: block; width:100%; height:100%; }
.pcd .pcd-nfc-svg { display: block; width:100%; height:100%; }
.pcd .abs { position: absolute; }

/* Metal ortak: kenar parlaması + kazıma yazı */
.pcd--metal { box-shadow: 0 1.2cqw 3.6cqw -1.4cqw rgba(10, 12, 20, .55), inset 0 0 0 .08em rgba(255, 255, 255, .22), inset 0 -.12em .3em rgba(0, 0, 0, .25); }
.pcd--metal::after { content: ''; position: absolute; inset:0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 .06em 0 rgba(255, 255, 255, .35), inset 0 -.06em 0 rgba(0, 0, 0, .25); z-index: 5; }
.pcd .etch { color: #d3d7dd; text-shadow: 0 .03em 0 rgba(0, 0, 0, .65), 0 -.02em 0 rgba(255, 255, 255, .12); }
.pcd .etch-dark { color: #1c1c1c; text-shadow: 0 .03em 0 rgba(255, 255, 255, .45); }

/* ================================================================
   STANDART (PVC)
   ================================================================ */

/* 1 — Işık */
.pcd--p-isik { background: #1f3fd1; color: #fff; }
.pcd--p-isik .dots { position: absolute; right:-8cqw; top:-8cqw; width:60cqw; height:60cqw; background-image: radial-gradient(rgba(255, 255, 255, .22) .14em, transparent .16em); background-size: .9em .9em; -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(circle at 70% 30%, #000 20%, transparent 70%); }
.pcd--p-isik .co { position: absolute; left:6.4cqw; top:6cqw; font-family: var(--mono); font-size: .55em; letter-spacing: .12em; text-transform: uppercase; opacity: .78; max-width: 70%; }
.pcd--p-isik .nfc { position: absolute; right:5.6cqw; top:4.8cqw; width:8.4cqw; height:8.4cqw; border-radius: 50%; background: #d8ff3e; color: #0b0d12; padding: .45em; }
.pcd--p-isik .who { position: absolute; left:6.4cqw; right:6.4cqw; bottom:6cqw; }
.pcd--p-isik .who b { display: block; font-family: var(--display); font-weight: 800; font-size: calc(2.15em * var(--fit2, 1)); line-height: .92; letter-spacing: -.045em; }
.pcd--p-isik .who span { display: block; margin-top: .55em; font-size: .7em; color: #d8ff3e; font-weight: 600; }
.pcd--p-isik.pcd--back { background: #f5f5f1; color: #0b0d12; }
.pcd--p-isik.pcd--back .qrbox { position: absolute; left:5.6cqw; top:5.6cqw; width:38.4cqw; height:38.4cqw; padding: .55em; background: #fff; border-radius: .7em; box-shadow: 0 0 0 .06em #e3e2dc; color: #0b0d12; }
.pcd--p-isik.pcd--back .rows { position: absolute; left:49.6cqw; right:5.6cqw; top:6.8cqw; display: grid; gap: .6em; }
.pcd--p-isik.pcd--back .rows div { font-size: .62em; }
.pcd--p-isik.pcd--back .rows small { display: block; font-family: var(--mono); font-size: .78em; letter-spacing: .1em; text-transform: uppercase; color: #5d6270; }
.pcd--p-isik.pcd--back .strip { position: absolute; left:0; right:0; bottom:0; height:12.8cqw; background: #1f3fd1; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 1.4em; font-family: var(--mono); font-size: .6em; letter-spacing: .06em; }
.pcd--p-isik.pcd--back .strip i { font-style: normal; color: #d8ff3e; }

/* 2 — Manşet */
.pcd--p-manset { background: #f3efe4; color: #1b1a17; font-family: var(--serif); }
.pcd--p-manset .mast { position: absolute; left:4.8cqw; right:4.8cqw; top:4cqw; text-align: center; border-top: .14em solid #1b1a17; border-bottom: .05em solid #1b1a17; padding: .35em 0 .3em; }
.pcd--p-manset .mast b { display: block; font-weight: 600; font-size: calc(2.05em * var(--fit, 1)); line-height: 1; letter-spacing: -.02em; }
.pcd--p-manset .dateline { position: absolute; left:4.8cqw; right:4.8cqw; top:17.8cqw; display: flex; justify-content: space-between; font-family: var(--mono); font-size: .46em; letter-spacing: .08em; text-transform: uppercase; border-bottom: .1em double #1b1a17; padding: .5em 0 .55em; }
.pcd--p-manset .head { position: absolute; left:4.8cqw; top:28cqw; width:52cqw; font-style: italic; font-size: 1.05em; line-height: 1.05; }
.pcd--p-manset .head small { display: block; margin-top: .45em; font-style: normal; font-family: var(--sans); font-size: .5em; letter-spacing: .02em; color: #55524a; }
.pcd--p-manset .cols { position: absolute; left:62.4cqw; right:4.8cqw; top:28.4cqw; bottom:4.8cqw; display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }
.pcd--p-manset .cols span { display: block; background: repeating-linear-gradient(180deg, #b9b3a3 0 .14em, transparent .14em .42em); border-left: .04em solid #c9c3b3; padding-left: .3em; }
.pcd--p-manset .cols span:first-child { border-left: 0; }
.pcd--p-manset.pcd--back { background: #121110; color: #f3efe4; }
.pcd--p-manset.pcd--back .ilan { position: absolute; left:5.2cqw; top:5.2cqw; bottom:5.2cqw; width:46.4cqw; border: .06em solid #f3efe4; padding: .7em; display: flex; flex-direction: column; }
.pcd--p-manset.pcd--back .ilan small { font-family: var(--mono); font-size: .45em; letter-spacing: .14em; text-transform: uppercase; text-align: center; border-bottom: .1em solid #f3efe4; padding-bottom: .5em; }
.pcd--p-manset.pcd--back .ilan .pcd-qr { flex: 1; margin-top: .6em; color: #f3efe4; }
.pcd--p-manset.pcd--back .txt { position: absolute; left:56.8cqw; right:5.2cqw; top:6.4cqw; }
.pcd--p-manset.pcd--back .txt b { display: block; font-style: italic; font-weight: 500; font-size: 1.35em; line-height: 1.02; }
.pcd--p-manset.pcd--back .txt p { margin-top: .9em; font-family: var(--sans); font-size: .56em; line-height: 1.7; color: #cfc9b8; }

/* 3 — Bauhaus */
.pcd--p-bauhaus { background: #f1ebdd; color: #111; }
.pcd--p-bauhaus .c1 { position: absolute; right:-10.4cqw; top:-12cqw; width:44cqw; height:44cqw; border-radius: 50%; background: #d8402b; }
.pcd--p-bauhaus .c2 { position: absolute; right:16.8cqw; bottom:0; width:25.6cqw; height:25.6cqw; background: #1f4fa3; border-top-left-radius: 100%; }
.pcd--p-bauhaus .c3 { position: absolute; right:0; bottom:0; width:16.8cqw; height:36cqw; background: #e2b63a; }
.pcd--p-bauhaus .c4 { position: absolute; right:37.6cqw; top:8.8cqw; width:0; height:0; border-left: 1.4em solid transparent; border-right: 1.4em solid transparent; border-bottom: 2.4em solid #111; }
.pcd--p-bauhaus .who { position: absolute; left:6cqw; top:6cqw; width:48cqw; }
.pcd--p-bauhaus .who b { display: block; font-weight: 800; font-size: calc(1.25em * var(--fit2, 1)); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.pcd--p-bauhaus .who span { display: block; margin-top: .6em; font-size: .62em; font-weight: 500; }
.pcd--p-bauhaus .co { position: absolute; left:6cqw; bottom:5.6cqw; font-family: var(--mono); font-size: .52em; letter-spacing: .12em; text-transform: uppercase; max-width: 22em; }
.pcd--p-bauhaus.pcd--back { background: #e2b63a; }
.pcd--p-bauhaus.pcd--back .c1 { right:auto; left:-12.8cqw; top:auto; bottom:-13.6cqw; width:36cqw; height:36cqw; background: #111; }
.pcd--p-bauhaus.pcd--back .qrbox { position: absolute; right:5.6cqw; top:5.6cqw; width:35.2cqw; height:35.2cqw; background: #f1ebdd; padding: .6em; color: #111; }
.pcd--p-bauhaus.pcd--back .rows { position: absolute; left:6cqw; top:6.4cqw; width:48cqw; display: grid; gap: .45em; font-size: .6em; font-weight: 600; }
.pcd--p-bauhaus.pcd--back .tag { position: absolute; right:5.6cqw; bottom:5.2cqw; width:35.2cqw; text-align: center; font-family: var(--mono); font-size: .5em; letter-spacing: .1em; text-transform: uppercase; }

/* 4 — Aurora */
.pcd--p-aurora { background: radial-gradient(70% 90% at 15% 20%, #7b4dff 0%, transparent 60%), radial-gradient(60% 80% at 90% 10%, #ff5fa2 0%, transparent 60%), radial-gradient(70% 90% at 80% 100%, #ffb347 0%, transparent 60%), #1a1033; color: #fff; }
.pcd--p-aurora .glass { position: absolute; left:5.6cqw; right:5.6cqw; bottom:5.6cqw; padding: 1em 1.1em; border-radius: 1em; background: rgba(255, 255, 255, .14); border: .06em solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(.6em); backdrop-filter: blur(.6em); }
.pcd--p-aurora .glass b { display: block; font-family: var(--display); font-weight: 700; font-size: calc(1.55em * var(--fit, 1)); letter-spacing: -.03em; line-height: 1; }
.pcd--p-aurora .glass span { display: block; margin-top: .4em; font-size: .62em; opacity: .9; }
.pcd--p-aurora .nfc { position: absolute; right:5.6cqw; top:5.2cqw; width:6.4cqw; height:6.4cqw; color: #fff; }
.pcd--p-aurora .co { position: absolute; left:6cqw; top:6cqw; font-family: var(--mono); font-size: .55em; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.pcd--p-aurora.pcd--back { background: radial-gradient(70% 90% at 85% 80%, #7b4dff 0%, transparent 60%), radial-gradient(60% 80% at 10% 90%, #ff5fa2 0%, transparent 60%), radial-gradient(70% 90% at 20% 0%, #ffb347 0%, transparent 55%), #1a1033; }
.pcd--p-aurora.pcd--back .glassq { position: absolute; left:5.6cqw; top:5.6cqw; width:39.2cqw; height:39.2cqw; padding: .75em; border-radius: 1em; background: rgba(255, 255, 255, .16); border: .06em solid rgba(255, 255, 255, .4); color: #fff; }
.pcd--p-aurora.pcd--back .rows { position: absolute; left:50.4cqw; right:5.6cqw; top:8cqw; display: grid; gap: .55em; font-size: .62em; }
.pcd--p-aurora.pcd--back .hint { position: absolute; left:6cqw; bottom:5.2cqw; font-family: var(--mono); font-size: .5em; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }

/* 5 — Kâğıt */
.pcd--p-kagit { background: #fff; color: #161616; box-shadow: 0 1.2cqw 3.6cqw -1.4cqw rgba(10, 12, 20, .3), 0 0 0 .25cqw #e6e6e2; }
.pcd--p-kagit .co { position: absolute; left:7.2cqw; top:6.8cqw; font-family: var(--mono); font-size: .48em; letter-spacing: .16em; text-transform: uppercase; color: #8a8a86; }
.pcd--p-kagit .rule { position: absolute; left:7.2cqw; right:7.2cqw; top:37.6cqw; height:0.16cqw; background: #161616; }
.pcd--p-kagit .who { position: absolute; left:7.2cqw; right:16cqw; top:40.4cqw; }
.pcd--p-kagit .who b { display: block; font-weight: 500; font-size: calc(1em * var(--fit, 1)); letter-spacing: -.01em; }
.pcd--p-kagit .who span { display: block; margin-top: .35em; font-size: .55em; color: #7a7a76; }
.pcd--p-kagit .nfc { position: absolute; right:7.2cqw; top:40.4cqw; width:4.2cqw; height:4.2cqw; color: #9a9a96; }
.pcd--p-kagit.pcd--back .rows { position: absolute; left:7.2cqw; top:7.2cqw; display: grid; gap: .55em; font-family: var(--mono); font-size: .5em; letter-spacing: .02em; color: #3a3a38; }
.pcd--p-kagit.pcd--back .qrbox { position: absolute; right:7.2cqw; bottom:7.2cqw; width:18.4cqw; height:18.4cqw; color: #161616; }
.pcd--p-kagit.pcd--back .url { position: absolute; left:7.2cqw; bottom:7.2cqw; font-size: .5em; color: #8a8a86; }

/* 6 — Konsol */
.pcd--p-konsol { background: #0d1410; color: #39ff8f; font-family: var(--mono); }
.pcd--p-konsol .bar { position: absolute; left:0; right:0; top:0; height:7.2cqw; background: #18221c; display: flex; align-items: center; gap: .35em; padding: 0 .9em; }
.pcd--p-konsol .bar i { width:2cqw; height:2cqw; border-radius: 50%; background: #ff5f57; }
.pcd--p-konsol .bar i:nth-child(2) { background: #febc2e; }
.pcd--p-konsol .bar i:nth-child(3) { background: #28c840; }
.pcd--p-konsol .bar span { margin-left: auto; font-size: .45em; color: #6c8b78; letter-spacing: .06em; }
.pcd--p-konsol .lines { position: absolute; left:5.2cqw; right:5.2cqw; top:12cqw; display: grid; gap: .55em; }
.pcd--p-konsol .lines .dim { font-size: .55em; color: #5d8a6e; }
.pcd--p-konsol .lines b { font-weight: 500; font-size: calc(1.2em * var(--fit, 1)); letter-spacing: -.02em; color: #b8ffd5; }
.pcd--p-konsol .lines .sub { font-size: .6em; }
.pcd--p-konsol .cur { display: inline-block; width: .55em; height: 1em; background: #39ff8f; vertical-align: -.12em; margin-left: .1em; }
.pcd--p-konsol .nfc { position: absolute; right:5.2cqw; bottom:4.8cqw; width:5.6cqw; height:5.6cqw; color: #39ff8f; }
.pcd--p-konsol.pcd--back .qrbox { position: absolute; left:5.2cqw; top:11.6cqw; width:33.6cqw; height:33.6cqw; padding: .4em; border: .06em dashed #2f5c42; color: #39ff8f; }
.pcd--p-konsol.pcd--back .rows { position: absolute; left:44cqw; right:4.8cqw; top:12.4cqw; display: grid; gap: .55em; font-size: .52em; }
.pcd--p-konsol.pcd--back .rows .dim { color: #5d8a6e; }

/* 7 — Kraft */
.pcd--p-kraft { background: radial-gradient(rgba(90, 60, 30, .18) .05em, transparent .07em) 0 0 / .55em .55em, radial-gradient(rgba(255, 255, 255, .2) .04em, transparent .06em) .25em .3em / .7em .7em, #c9a77c; color: #3b2a1a; font-family: var(--serif); }
.pcd--p-kraft .leaf { position: absolute; right:-2.4cqw; bottom:-3.2cqw; width:44cqw; height:44cqw; color: #2f4a35; opacity: .85; }
.pcd--p-kraft .who { position: absolute; left:6.4cqw; top:6.4cqw; width:56cqw; }
.pcd--p-kraft .who b { display: block; font-weight: 500; font-size: 1.7em; line-height: 1; letter-spacing: -.02em; }
.pcd--p-kraft .who span { display: block; margin-top: .45em; font-style: italic; font-size: .72em; }
.pcd--p-kraft .stamp { position: absolute; left:6.4cqw; bottom:6cqw; width:13.6cqw; height:13.6cqw; border-radius: 50%; border: .08em solid #3b2a1a; display: grid; place-items: center; font-family: var(--soft); font-weight: 700; font-size: 1em; }
.pcd--p-kraft .co { position: absolute; left:23.2cqw; bottom:8.8cqw; font-family: var(--sans); font-size: .5em; letter-spacing: .14em; text-transform: uppercase; }
.pcd--p-kraft.pcd--back { background: radial-gradient(rgba(255, 255, 255, .06) .05em, transparent .07em) 0 0 / .55em .55em, #23372b; color: #e3cba4; }
.pcd--p-kraft.pcd--back .qrbox { position: absolute; right:6.4cqw; top:6.4cqw; width:35.2cqw; height:35.2cqw; padding: .55em; background: #e3cba4; border-radius: .4em; color: #23372b; }
.pcd--p-kraft.pcd--back .rows { position: absolute; left:6.4cqw; top:7.2cqw; width:48cqw; display: grid; gap: .5em; font-size: .65em; }
.pcd--p-kraft.pcd--back .rows b { font-weight: 500; font-size: 1.5em; font-style: italic; }

/* 8 — Retro 70 */
.pcd--p-retro { background: #f4e3c3; color: #4a2a17; }
.pcd--p-retro .sun { position: absolute; right:-20cqw; bottom:-38.4cqw; width:80cqw; height:80cqw; border-radius: 50%; background: repeating-radial-gradient(circle at center, #e8692d 0 1.1em, #f4e3c3 1.1em 1.4em, #c8402a 1.4em 2.5em, #f4e3c3 2.5em 2.8em, #f2a93b 2.8em 3.9em, #f4e3c3 3.9em 4.2em, #6b3a1f 4.2em 5.3em, #f4e3c3 5.3em 5.6em); }
.pcd--p-retro .who { position: absolute; left:6cqw; top:6cqw; width:56cqw; }
.pcd--p-retro .who b { display: block; font-family: var(--soft); font-weight: 800; font-size: calc(1.85em * var(--fit2, 1)); line-height: .95; letter-spacing: -.02em; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.pcd--p-retro .who span { display: block; margin-top: .5em; font-size: .64em; font-weight: 600; }
.pcd--p-retro .co { position: absolute; left:6cqw; bottom:5.6cqw; font-family: var(--soft); font-style: italic; font-size: .72em; }
.pcd--p-retro.pcd--back { background: #4a2a17; color: #f4e3c3; }
.pcd--p-retro.pcd--back .band { position: absolute; left:0; right:0; top:0; height:8.8cqw; background: linear-gradient(180deg, #f2a93b 0 33%, #e8692d 33% 66%, #c8402a 66%); }
.pcd--p-retro.pcd--back .qrbox { position: absolute; left:6cqw; top:13.6cqw; width:34.4cqw; height:34.4cqw; padding: .55em; background: #f4e3c3; border-radius: 1.2em; color: #4a2a17; }
.pcd--p-retro.pcd--back .rows { position: absolute; left:45.6cqw; right:5.6cqw; top:15.2cqw; display: grid; gap: .55em; font-size: .62em; }
.pcd--p-retro.pcd--back .rows b { font-family: var(--soft); font-weight: 800; font-size: 1.5em; }

/* 9 — Bilet */
.pcd--p-bilet { background: #ff4f6d; color: #fff; }
.pcd--p-bilet .stub { position: absolute; right:0; top:0; bottom:0; width:22.4cqw; background: #ff7088; border-left: .1em dashed rgba(255, 255, 255, .75); display: flex; align-items: center; justify-content: center; }
.pcd--p-bilet .stub span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--stencil); font-size: 1.5em; letter-spacing: .08em; }
.pcd--p-bilet .stub::before, .pcd--p-bilet .stub::after { content: ''; position: absolute; left:-3cqw; width:5.6cqw; height:5.6cqw; border-radius: 50%; background: #f5f5f1; }
.pcd--p-bilet .stub::before { top:-2.8cqw; }
.pcd--p-bilet .stub::after { bottom:-2.8cqw; }
.pcd--p-bilet .lbl { position: absolute; left:5.6cqw; top:5.2cqw; font-family: var(--mono); font-size: .5em; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.pcd--p-bilet .who { position: absolute; left:5.6cqw; right:28cqw; top:11.6cqw; }
.pcd--p-bilet .who b { display: block; font-family: var(--stencil); font-weight: 400; font-size: calc(2.5em * var(--fit2, 1)); line-height: .9; letter-spacing: .01em; text-transform: uppercase; }
.pcd--p-bilet .who span { display: block; margin-top: .3em; font-size: .64em; font-weight: 600; }
.pcd--p-bilet .seat { position: absolute; left:5.6cqw; right:28cqw; bottom:5.2cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; border-top: .06em solid rgba(255, 255, 255, .55); padding-top: .55em; }
.pcd--p-bilet .seat div { font-size: .48em; }
.pcd--p-bilet .seat small { display: block; font-family: var(--mono); font-size: .85em; letter-spacing: .14em; opacity: .75; }
.pcd--p-bilet .seat b { display: block; margin-top: .2em; font-size: 1.2em; }
.pcd--p-bilet.pcd--back { background: #fff8f0; color: #2a1218; }
.pcd--p-bilet.pcd--back .barcode { position: absolute; left:5.6cqw; right:5.6cqw; top:5.2cqw; height:9.6cqw; background: repeating-linear-gradient(90deg, #2a1218 0 .12em, transparent .12em .2em, #2a1218 .2em .26em, transparent .26em .42em, #2a1218 .42em .6em, transparent .6em .7em, #2a1218 .7em .74em, transparent .74em .9em); }
.pcd--p-bilet.pcd--back .qrbox { position: absolute; left:5.6cqw; bottom:5.2cqw; width:32cqw; height:32cqw; color: #ff4f6d; }
.pcd--p-bilet.pcd--back .rows { position: absolute; left:43.2cqw; right:5.6cqw; bottom:5.6cqw; display: grid; gap: .5em; font-size: .6em; }
.pcd--p-bilet.pcd--back .rows b { font-family: var(--stencil); font-weight: 400; font-size: 1.9em; letter-spacing: .02em; color: #ff4f6d; }

/* 10 — Neon */
.pcd--p-neon { background: #07060b; color: #fff; }
.pcd--p-neon .frame { position: absolute; left:4.4cqw; right:4.4cqw; top:4.4cqw; bottom:4.4cqw; border: .1em solid #ff2bd6; border-radius: 1em; box-shadow: 0 0 .5em #ff2bd6, inset 0 0 .5em rgba(255, 43, 214, .6); }
.pcd--p-neon .line { position: absolute; right:9.6cqw; top:-4cqw; width:0.4cqw; height:36cqw; background: #19f0ff; box-shadow: 0 0 .5em #19f0ff; transform: rotate(35deg); transform-origin: top; }
.pcd--p-neon .who { position: absolute; left:8.8cqw; bottom:8.8cqw; right:8.8cqw; }
.pcd--p-neon .who b { display: block; font-family: var(--display); font-weight: 800; font-size: calc(1.8em * var(--fit, 1)); letter-spacing: -.03em; line-height: 1; color: #ffe9fb; text-shadow: 0 0 .25em #ff2bd6, 0 0 .6em #ff2bd6; }
.pcd--p-neon .who span { display: block; margin-top: .45em; font-size: .62em; color: #19f0ff; text-shadow: 0 0 .4em #19f0ff; letter-spacing: .04em; }
.pcd--p-neon .nfc { position: absolute; left:8.8cqw; top:8.8cqw; width:6.4cqw; height:6.4cqw; color: #19f0ff; filter: drop-shadow(0 0 .2em #19f0ff); }
.pcd--p-neon.pcd--back { background: linear-gradient(transparent 0 calc(100% - .04em), rgba(25, 240, 255, .28) 0) 0 0 / 1.2em 1.2em, linear-gradient(90deg, transparent 0 calc(100% - .04em), rgba(25, 240, 255, .28) 0) 0 0 / 1.2em 1.2em, #07060b; }
.pcd--p-neon.pcd--back .qrbox { position: absolute; left:6.4cqw; top:6.4cqw; width:36cqw; height:36cqw; padding: .6em; border-radius: .8em; border: .1em solid #ff2bd6; box-shadow: 0 0 .6em #ff2bd6; background: #07060b; color: #fff; }
.pcd--p-neon.pcd--back .rows { position: absolute; left:48.8cqw; right:5.6cqw; top:8cqw; display: grid; gap: .6em; font-size: .6em; color: #c7fbff; }
.pcd--p-neon.pcd--back .rows b { color: #ffe9fb; text-shadow: 0 0 .3em #ff2bd6; font-size: 1.3em; }

/* ================================================================
   METAL
   ================================================================ */

/* 11 — Siyah Mat */
.pcd--m-siyah { background: radial-gradient(120% 90% at 30% 10%, #262626, #0c0c0c 70%); }
.pcd--m-siyah .co { position: absolute; left:6.4cqw; top:6cqw; font-size: .5em; letter-spacing: .3em; text-transform: uppercase; }
.pcd--m-siyah .who { position: absolute; left:0; right:0; top:50%; transform: translateY(-50%); text-align: center; }
.pcd--m-siyah .who b { display: block; font-weight: 600; font-size: calc(1.1em * var(--fit, 1)); letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; }
.pcd--m-siyah .who i { display: block; width:12cqw; height:0.2cqw; margin: .8em auto; background: #c9cdd3; opacity: .7; }
.pcd--m-siyah .who span { display: block; font-size: .52em; letter-spacing: .28em; text-transform: uppercase; }
.pcd--m-siyah .nfc { position: absolute; right:6cqw; bottom:5.6cqw; width:5.2cqw; height:5.2cqw; color: #c9cdd3; opacity: .85; }
.pcd--m-siyah.pcd--back .qrbox { position: absolute; left:6.8cqw; top:50%; transform: translateY(-50%); width:34.4cqw; height:34.4cqw; color: #c9cdd3; }
.pcd--m-siyah.pcd--back .rows { position: absolute; left:48cqw; right:6cqw; top:50%; transform: translateY(-50%); display: grid; gap: .7em; font-size: .52em; letter-spacing: .1em; }

/* 12 — Fırçalı Çelik */
.pcd--m-celik { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .09) 0 .025em, rgba(0, 0, 0, .05) .025em .06em, rgba(255, 255, 255, .03) .06em .085em), linear-gradient(100deg, #9aa0a8 0%, #d9dde2 35%, #a9afb7 60%, #d2d6db 85%, #a3a9b1 100%); color: #121417; }
.pcd--m-celik .who { position: absolute; left:6cqw; top:6cqw; right:24cqw; }
.pcd--m-celik .who b { display: block; font-weight: 700; font-size: calc(1.35em * var(--fit, 1)); letter-spacing: -.02em; line-height: 1; }
.pcd--m-celik .who span { display: block; margin-top: .45em; font-size: .6em; }
.pcd--m-celik .side { position: absolute; right:0; top:0; bottom:0; width:16cqw; background: #121417; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.3em 0; color: #d9dde2; }
.pcd--m-celik .side .nfc { width:5.6cqw; height:5.6cqw; }
.pcd--m-celik .side span { writing-mode: vertical-rl; font-family: var(--mono); font-size: .45em; letter-spacing: .3em; text-transform: uppercase; }
.pcd--m-celik .rows { position: absolute; left:6cqw; right:22cqw; bottom:5.2cqw; display: grid; grid-template-columns: 1fr 1fr; gap: .3em .8em; font-family: var(--mono); font-size: .46em; }
.pcd--m-celik.pcd--back .qrbox { position: absolute; right:6cqw; top:50%; transform: translateY(-50%); width:37.6cqw; height:37.6cqw; color: #121417; }
.pcd--m-celik.pcd--back .big { position: absolute; left:6cqw; top:6cqw; font-family: var(--mono); font-size: .52em; letter-spacing: .2em; line-height: 2; text-transform: uppercase; }
.pcd--m-celik.pcd--back .co { position: absolute; left:6cqw; bottom:5.6cqw; font-weight: 700; font-size: .8em; }

/* 13 — Altın */
.pcd--m-altin { background: linear-gradient(120deg, #a67c1f 0%, #f6e27a 28%, #c99a2e 48%, #fff3b0 63%, #b8860b 100%); color: #20180a; font-family: var(--serif); }
.pcd--m-altin .mono { position: absolute; left:50%; top:6.4cqw; transform: translateX(-50%); width:18.4cqw; height:18.4cqw; border-radius: 50%; border: .07em solid #20180a; display: grid; place-items: center; font-size: 1em; }
.pcd--m-altin .mono b { font-weight: 500; font-size: 1.7em; letter-spacing: .02em; }
.pcd--m-altin .who { position: absolute; left:6cqw; right:6cqw; top:30cqw; text-align: center; }
.pcd--m-altin .who b { display: block; font-weight: 500; font-size: calc(1.15em * var(--fit, 1)); letter-spacing: .14em; text-transform: uppercase; padding-left: .14em; }
.pcd--m-altin .who span { display: block; margin-top: .5em; font-style: italic; font-size: .66em; }
.pcd--m-altin .nfc { position: absolute; right:5.6cqw; bottom:5.2cqw; width:4.8cqw; height:4.8cqw; color: #20180a; }
.pcd--m-altin.pcd--back .wm { position: absolute; left:-2.4cqw; top:50%; transform: translateY(-50%); font-size: 10em; line-height: 1; font-weight: 500; color: rgba(32, 24, 10, .1); }
.pcd--m-altin.pcd--back .qrbox { position: absolute; right:6.4cqw; top:50%; transform: translateY(-50%); width:34.4cqw; height:34.4cqw; color: #20180a; }
.pcd--m-altin.pcd--back .rows { position: absolute; left:6.8cqw; top:50%; transform: translateY(-50%); width:48cqw; display: grid; gap: .55em; font-size: .62em; }

/* 14 — Rose Gold */
.pcd--m-rose { background: linear-gradient(125deg, #b76e79 0%, #f4c9c1 32%, #e0a899 52%, #fbe1da 68%, #c2847a 100%); color: #4e2526; font-family: var(--serif); }
.pcd--m-rose .frame { position: absolute; inset:3.6cqw; border: .06em solid rgba(78, 37, 38, .6); border-radius: .5em; }
.pcd--m-rose .who { position: absolute; left:8cqw; right:8cqw; top:50%; transform: translateY(-58%); }
.pcd--m-rose .who b { display: block; font-style: italic; font-weight: 400; font-size: calc(1.85em * var(--fit, 1)); line-height: 1; letter-spacing: -.01em; }
.pcd--m-rose .who span { display: block; margin-top: .6em; font-family: var(--sans); font-size: .5em; letter-spacing: .26em; text-transform: uppercase; }
.pcd--m-rose .co { position: absolute; left:8cqw; bottom:7.2cqw; font-size: .62em; font-style: italic; }
.pcd--m-rose .nfc { position: absolute; right:8cqw; bottom:6.8cqw; width:4.8cqw; height:4.8cqw; }
.pcd--m-rose.pcd--back .qrbox { position: absolute; left:8cqw; top:8cqw; width:31.2cqw; height:31.2cqw; color: #4e2526; }
.pcd--m-rose.pcd--back .rows { position: absolute; left:44.8cqw; right:8cqw; top:8.8cqw; display: grid; gap: .55em; font-size: .62em; }
.pcd--m-rose.pcd--back .rows b { font-style: italic; font-weight: 400; font-size: 1.6em; }

/* 15 — Bakır */
.pcd--m-bakir { background: radial-gradient(60% 80% at 85% 90%, rgba(70, 140, 120, .28), transparent 60%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 .03em, transparent .03em .07em), linear-gradient(115deg, #7a3f22 0%, #d9895a 30%, #b8683d 55%, #e6a072 75%, #8a4b2a 100%); color: #24120a; }
.pcd--m-bakir .scr { position: absolute; width:2.8cqw; height:2.8cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f0b48a, #6a3519 70%); box-shadow: inset 0 0 0 .05em rgba(0, 0, 0, .3); }
.pcd--m-bakir .scr::after { content: ''; position: absolute; left:0.48cqw; right:0.48cqw; top:1.24cqw; height:0.32cqw; background: rgba(0, 0, 0, .45); transform: rotate(35deg); }
.pcd--m-bakir .s1 { left:3.2cqw; top:3.2cqw; } .pcd--m-bakir .s2 { right:3.2cqw; top:3.2cqw; } .pcd--m-bakir .s3 { left:3.2cqw; bottom:3.2cqw; } .pcd--m-bakir .s4 { right:3.2cqw; bottom:3.2cqw; }
.pcd--m-bakir .tag { position: absolute; left:8cqw; top:7.6cqw; border: .07em solid #24120a; padding: .3em .6em; font-family: var(--mono); font-size: .48em; letter-spacing: .2em; text-transform: uppercase; }
.pcd--m-bakir .who { position: absolute; left:8cqw; right:8cqw; bottom:7.6cqw; }
.pcd--m-bakir .who b { display: block; font-family: var(--stencil); font-weight: 400; font-size: calc(2.9em * var(--fit, 1)); line-height: .85; letter-spacing: .03em; text-transform: uppercase; }
.pcd--m-bakir .who span { display: block; margin-top: .3em; font-family: var(--mono); font-size: .5em; letter-spacing: .14em; text-transform: uppercase; }
.pcd--m-bakir .nfc { position: absolute; right:8cqw; top:7.2cqw; width:6cqw; height:6cqw; }
.pcd--m-bakir.pcd--back .qrbox { position: absolute; right:8cqw; top:50%; transform: translateY(-50%); width:34.4cqw; height:34.4cqw; color: #24120a; }
.pcd--m-bakir.pcd--back .rows { position: absolute; left:8cqw; top:50%; transform: translateY(-50%); width:47.2cqw; display: grid; gap: .5em; font-family: var(--mono); font-size: .5em; letter-spacing: .06em; }
.pcd--m-bakir.pcd--back .rows b { font-family: var(--stencil); font-weight: 400; font-size: 2.4em; letter-spacing: .04em; }

/* 16 — Titanyum */
.pcd--m-titan { background: linear-gradient(160deg, #5d636c 0%, #3a3f46 45%, #2b2f35 100%); color: #d6dae0; }
.pcd--m-titan .carbon { position: absolute; left:0; top:0; bottom:0; width:28cqw; background: repeating-linear-gradient(45deg, #1d2024 0 .3em, #2a2e33 .3em .6em), #1d2024; background-blend-mode: normal; box-shadow: inset -.06em 0 0 rgba(255, 255, 255, .15); }
.pcd--m-titan .carbon::after { content: ''; position: absolute; inset:0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 .3em, transparent .3em .6em); }
.pcd--m-titan .nfc { position: absolute; left:10.4cqw; top:50%; transform: translateY(-50%); width:7.6cqw; height:7.6cqw; color: #d6dae0; z-index: 1; }
.pcd--m-titan .spec { position: absolute; left:33.6cqw; right:5.6cqw; top:6.4cqw; display: grid; gap: .7em; }
.pcd--m-titan .spec div { font-size: .78em; }
.pcd--m-titan .spec small { display: block; font-family: var(--mono); font-size: .58em; letter-spacing: .2em; color: #8f969f; }
.pcd--m-titan .spec b { display: block; font-weight: 600; font-size: calc(1.35em * var(--fit, 1)); letter-spacing: -.02em; color: #eef0f3; }
.pcd--m-titan .spec span { display: block; margin-top: .1em; }
.pcd--m-titan.pcd--back { background: repeating-linear-gradient(45deg, #1d2024 0 .3em, #2a2e33 .3em .6em); }
.pcd--m-titan.pcd--back .panel { position: absolute; left:5.2cqw; right:5.2cqw; top:5.2cqw; bottom:5.2cqw; border-radius: .7em; background: linear-gradient(160deg, #5d636c, #33383f); box-shadow: inset 0 0 0 .05em rgba(255, 255, 255, .2); }
.pcd--m-titan.pcd--back .qrbox { position: absolute; left:9.2cqw; top:9.2cqw; width:33.2cqw; height:33.2cqw; color: #e6e9ed; }
.pcd--m-titan.pcd--back .rows { position: absolute; left:47.2cqw; right:8.8cqw; top:10.4cqw; display: grid; gap: .55em; font-family: var(--mono); font-size: .5em; }

/* 17 — Kesim (lazer kesim pencere) */
.pcd--m-kesim { background: linear-gradient(150deg, #262628, #111113); -webkit-mask-image: linear-gradient(#000, #000), repeating-linear-gradient(90deg, #000 0 .45em, transparent .45em 1.05em); -webkit-mask-size: 100% 100%, 3.6em 10em; -webkit-mask-position: 0 0, 90% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: xor; mask-image: linear-gradient(#000, #000), repeating-linear-gradient(90deg, #000 0 .45em, transparent .45em 1.05em); mask-size: 100% 100%, 3.6em 10em; mask-position: 0 0, 90% 50%; mask-repeat: no-repeat; mask-composite: exclude; }
.pcd--m-kesim .vname { position: absolute; left:5.6cqw; top:5.2cqw; bottom:5.2cqw; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: .6em; }
.pcd--m-kesim .vname b { font-weight: 700; font-size: calc(1.45em * var(--fit2, 1)); letter-spacing: .12em; text-transform: uppercase; }
.pcd--m-kesim .vname span { font-size: .5em; letter-spacing: .25em; text-transform: uppercase; }
.pcd--m-kesim .mid { position: absolute; left:21.6cqw; top:6cqw; width:44cqw; display: grid; gap: .5em; font-family: var(--mono); font-size: .5em; }
.pcd--m-kesim .nfc { position: absolute; left:21.6cqw; bottom:5.6cqw; width:5.6cqw; height:5.6cqw; color: #c9cdd3; }
.pcd--m-kesim.pcd--back { -webkit-mask-position: 0 0, 10% 50%; mask-position: 0 0, 10% 50%; }
.pcd--m-kesim.pcd--back .qrbox { position: absolute; right:6.4cqw; top:50%; transform: translateY(-50%); width:34.4cqw; height:34.4cqw; color: #c9cdd3; }
.pcd--m-kesim.pcd--back .rows { position: absolute; left:29.6cqw; top:50%; transform: translateY(-50%); width:26.4cqw; display: grid; gap: .6em; font-size: .5em; }

/* 18 — Gece Mavisi */
.pcd--m-gece { background: linear-gradient(140deg, #24406e 0%, #16243f 55%, #0f1a30 100%); color: #cfd8e6; }
.pcd--m-gece .topo { position: absolute; inset:0; width:100%; height:100%; color: #b8c3d4; opacity: .35; }
.pcd--m-gece .who { position: absolute; left:6.4cqw; bottom:6.4cqw; right:24cqw; }
.pcd--m-gece .who b { display: block; font-weight: 600; font-size: calc(1.4em * var(--fit, 1)); letter-spacing: -.015em; line-height: 1; }
.pcd--m-gece .who span { display: block; margin-top: .5em; font-size: .58em; letter-spacing: .08em; }
.pcd--m-gece .co { position: absolute; left:6.4cqw; top:6cqw; font-family: var(--mono); font-size: .48em; letter-spacing: .22em; text-transform: uppercase; }
.pcd--m-gece .nfc { position: absolute; right:6cqw; top:5.2cqw; width:6cqw; height:6cqw; color: #cfd8e6; }
.pcd--m-gece.pcd--back .qrbox { position: absolute; left:6.4cqw; top:6.4cqw; width:34.4cqw; height:34.4cqw; color: #dde4ef; }
.pcd--m-gece.pcd--back .rows { position: absolute; left:46.4cqw; right:6cqw; top:7.6cqw; display: grid; gap: .6em; font-size: .55em; }

/* 19 — Monogram */
.pcd--m-monogram { background: radial-gradient(100% 120% at 0% 0%, #1f1f22, #0a0a0b 70%); color: #c9cdd3; }
.pcd--m-monogram .big { position: absolute; left:-0.8cqw; top:50%; transform: translateY(-52%); font-family: var(--serif); font-weight: 500; font-size: 11em; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: .012em rgba(201, 205, 211, .75); }
.pcd--m-monogram .who { position: absolute; right:6cqw; bottom:5.6cqw; text-align: right; }
.pcd--m-monogram .who b { display: block; font-weight: 600; font-size: calc(.85em * var(--fit, 1)); letter-spacing: .18em; text-transform: uppercase; }
.pcd--m-monogram .who span { display: block; margin-top: .45em; font-size: .48em; letter-spacing: .2em; text-transform: uppercase; }
.pcd--m-monogram .nfc { position: absolute; right:6cqw; top:5.2cqw; width:5.2cqw; height:5.2cqw; color: #c9cdd3; }
.pcd--m-monogram.pcd--back .qrbox { position: absolute; right:6.4cqw; top:50%; transform: translateY(-50%); width:34.4cqw; height:34.4cqw; color: #c9cdd3; }
.pcd--m-monogram.pcd--back .ini { position: absolute; left:6.4cqw; top:5.6cqw; font-family: var(--serif); font-size: 1.6em; }
.pcd--m-monogram.pcd--back .rows { position: absolute; left:6.4cqw; bottom:5.6cqw; width:48cqw; display: grid; gap: .5em; font-size: .5em; letter-spacing: .08em; }

/* 20 — Ayna Gümüş */
.pcd--m-ayna { background: linear-gradient(115deg, #c3c9d1 0%, #f7f8fa 33%, #aeb5be 34.5%, #e9ecf0 58%, #bec4cc 80%, #eef0f3 100%); color: #15171a; }
.pcd--m-ayna .who { position: absolute; left:7.2cqw; top:7.2cqw; }
.pcd--m-ayna .who b { display: block; font-weight: 500; font-size: calc(.95em * var(--fit, 1)); letter-spacing: .2em; text-transform: uppercase; }
.pcd--m-ayna .who span { display: block; margin-top: .55em; font-size: .5em; letter-spacing: .14em; color: #3a3f46; }
.pcd--m-ayna .co { position: absolute; left:7.2cqw; bottom:6.8cqw; font-size: .5em; letter-spacing: .3em; text-transform: uppercase; }
.pcd--m-ayna .nfc { position: absolute; right:7.2cqw; bottom:6cqw; width:4.8cqw; height:4.8cqw; }
.pcd--m-ayna.pcd--back .frame { position: absolute; right:6.4cqw; top:6.4cqw; width:37.6cqw; height:37.6cqw; border: .06em solid #15171a; padding: .55em; }
.pcd--m-ayna.pcd--back .frame .pcd-qr { width:100%; height:100%; color: #15171a; }
.pcd--m-ayna.pcd--back .rows { position: absolute; left:7.2cqw; top:7.2cqw; width:44cqw; display: grid; gap: .65em; font-size: .5em; letter-spacing: .08em; }

.pcd .qrbox > .pcd-qr, .pcd .glassq > .pcd-qr { width:100%; height:100%; }
.pcd--m-bakir .who { overflow: hidden; }