/* ==========================================================================
   Ossdoy — Ürün maketleri: telefon (Views/Home/_Phone), NFC kart (_NfcCard), QR (_QrArt)
   Herkese açık site (_Layout) ve kimlik sayfaları (_AuthLayout) ortak kullanır; sayfa token'larına bağımlı değildir.
   ========================================================================== */

/* ------------------------------------------------- Telefon
   Titanyum çerçeve, iki yanda tuşlar, ince siyah çerçeve; ekran görüntüsü genişliğe oturur, kırpılmaz. */
.phone {
    --screen-bg: #1E2224;
    --screen-fg: #FFFFFF;
    position: relative; aspect-ratio: 9 / 19.4;
    border-radius: 16.5% / 7.7%;
    background: linear-gradient(135deg, #a3aab4 0%, #454a53 8%, #1a1d22 26%, #0b0d10 60%, #2e333a 88%, #969da7 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        inset 0 0 0 4px #07080a,
        0 60px 90px -40px rgba(3, 10, 20, 0.7),
        0 22px 40px -22px rgba(3, 10, 20, 0.5);
}
/* Sol: eylem + ses tuşları (tek parça, arada boşluk), sağ: güç tuşu */
.phone::before, .phone::after { content: ''; position: absolute; width: 1.5%; border-radius: 2px; }
.phone::before {
    left: -1%; top: 16%; height: 20%;
    background: linear-gradient(180deg, #3b4048 0 16%, transparent 16% 30%, #3b4048 30% 62%, transparent 62% 70%, #3b4048 70% 100%);
}
.phone::after { right: -1%; top: 26%; height: 12%; background: linear-gradient(90deg, #454a53, #22262b); }
.phone--light { --screen-bg: #FFFFFF; --screen-fg: #0A1A2F; }

/* Çerçeve payı padding ile değil inset ile: yüzde padding kapsayıcının genişliğine göre çözülür ve
   max-content / grid içinde telefonu bozar. Dikey %1.4 × (19.4/9) ≈ yatay %3. */
.phone__screen {
    position: absolute; inset: 1.4% 3%; overflow: hidden; container-type: inline-size;
    display: flex; flex-direction: column;
    border-radius: 14% / 6.6%; background: var(--screen-bg);
}
.phone__screen::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%); }
.phone__island { position: absolute; top: 2.6cqi; left: 50%; z-index: 4; width: 30cqi; height: 8.6cqi; border-radius: 999px; background: #000; transform: translateX(-50%); }
.phone__status {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    height: 13cqi; padding: 1.6cqi 7.5cqi 0 9cqi; color: var(--screen-fg);
    font-family: -apple-system, 'Inter', system-ui, sans-serif; font-size: 4.3cqi; font-weight: 600; letter-spacing: -0.01em;
}
.phone__icons { display: inline-flex; align-items: center; gap: 1.4cqi; }
.phone__icons svg { height: 3.2cqi; width: auto; }
.phone__icons svg:last-child { height: 3.6cqi; }
.phone__shot { display: block; flex: 0 0 auto; width: 100%; height: auto; }
.phone__home { position: absolute; bottom: 2.2cqi; left: 50%; z-index: 4; width: 34cqi; height: 1.3cqi; border-radius: 999px; background: var(--screen-fg); opacity: 0.6; transform: translateX(-50%); }

/* ---------------------------------------------- Demo kart (telefon ekranında, _DemoCard)
   Ölçüler .phone__screen konteynerinin genişliğine göre (cqi). */
.demo-card {
    --demo-bg: #FFFFFF; --demo-fg: #1D2733; --demo-muted: #6B7684; --demo-line: rgba(29, 39, 51, 0.55);
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 5cqi 8cqi 8cqi; background: var(--demo-bg); color: var(--demo-fg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif; text-align: center; line-height: 1.2;
}
.demo-card.is-dark { --demo-bg: #1E2224; --demo-fg: #FFFFFF; --demo-muted: rgba(255, 255, 255, 0.7); --demo-line: rgba(255, 255, 255, 0.75); }
.demo-card__logo { display: flex; align-items: center; gap: 3.4cqi; margin: 7cqi 0 9cqi; }
.demo-card__mark { display: grid; place-items: center; flex: none; width: 18cqi; height: 18cqi; border-radius: 4.5cqi; background: var(--demo-accent); color: #fff; font-size: 7cqi; font-weight: 700; letter-spacing: -0.02em; }
.demo-card__brand { max-width: 50cqi; font-size: 6.6cqi; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; text-align: start; }
.demo-card__name { display: flex; align-items: center; gap: 1.6cqi; font-size: 7.4cqi; font-weight: 600; }
.demo-card__name i { font-size: 5.2cqi; color: var(--demo-muted); }
.demo-card__btns { display: flex; justify-content: center; gap: 2.4cqi; margin: 6cqi 0 8cqi; }
.demo-card__btns span { padding: 2cqi 3.2cqi; border: 1px solid var(--demo-line); border-radius: 1.6cqi; font-size: 4cqi; white-space: nowrap; }
.demo-card__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5cqi; width: 100%; }
.demo-card__tiles img { display: block; width: 100%; aspect-ratio: 1; border-radius: 3cqi; object-fit: cover; }
.demo-card__foot { margin-top: auto; padding-top: 6cqi; color: var(--demo-muted); font-size: 3.2cqi; font-weight: 700; letter-spacing: 0.24em; }

/* ---------------------------------------------- NFC kart
   Mat gece mavisi, ince açık kenar, çok hafif çizgi dokusu ve hareketle kayan parlama. */
.nfc-card {
    position: relative; aspect-ratio: 85.6 / 54; overflow: hidden;
    border-radius: 5.2% / 8.2%;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 7px),
        radial-gradient(110% 90% at 100% 0%, rgba(47, 111, 209, 0.35) 0%, rgba(47, 111, 209, 0) 55%),
        linear-gradient(145deg, #15294a 0%, #0B1A30 50%, #050C17 100%);
    color: #fff; container-type: inline-size;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.09),
        0 40px 60px -28px rgba(0, 0, 0, 0.75),
        0 12px 24px -12px rgba(0, 0, 0, 0.5);
}
.nfc-card::after { content: ''; position: absolute; left: 8%; right: 8%; top: 58%; height: 1px; background: linear-gradient(90deg, rgba(108, 195, 245, 0.55), rgba(108, 195, 245, 0)); }
.nfc-card__sheen {
    position: absolute; inset: -40%; pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.13) 48%, rgba(255, 255, 255, 0.03) 54%, transparent 60%);
    transform: translateX(calc(var(--tilt-y, 0deg) * 2));
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.nfc-card__logo { position: absolute; left: 8%; top: 14%; width: 42%; height: auto; }
.nfc-card__nfc { position: absolute; right: 7.5%; top: 12%; width: 8.5%; color: #6CC3F5; }
.nfc-card__foot {
    position: absolute; left: 8%; right: 8%; bottom: 12%;
    display: flex; justify-content: space-between; align-items: flex-end;
    font-size: 3.2cqi; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}

/* ---------------------------------------------- QR */
.qr-art { display: block; width: 100%; height: auto; color: #0A1A2F; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
    .nfc-card__sheen { transition: none; }
}