/* Ana sayfa: CANLI DEMO panosu (bugün denenebilir), kancadaki canlı şerit ve üst çubuk işareti. */
.canli-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--nane); vertical-align: middle; margin-right: 7px; box-shadow: 0 0 0 0 color-mix(in srgb, var(--nane) 55%, transparent); animation: canli-nabiz 2s ease-out infinite; }
@keyframes canli-nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nane) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.menu a.canli::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--nane); vertical-align: 1px; animation: canli-nabiz 2s ease-out infinite; }

/* kanca altı: canlı demo şeridi (nane ton; entegrasyon şeridi kehribar kalır) */
.en-serit.canli { margin-top: 24px; background: linear-gradient(90deg, color-mix(in srgb, var(--nane) 14%, transparent), transparent 80%); }
.en-serit.canli:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--nane) 26%, transparent), transparent 90%); }
.en-serit.canli .sm-fiyat { color: var(--nane-koyu); }
.en-serit.canli + .en-serit { margin-top: 12px; }

.cd-ic { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 18px; }
.cd-sol { min-width: 0; }
.cd-gercek { margin-top: 26px; }
.cd-gercek h3 { margin: 0 0 4px; font: 800 18px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.cd-kart { position: relative; background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 10px; padding: 18px 18px 20px; box-shadow: var(--golge-tent); text-align: center; }
.cd-etiket { display: inline-flex; align-items: center; gap: 0; margin-bottom: 12px; padding: 5px 9px; border: 2px solid var(--nane-koyu); border-radius: 4px; color: var(--nane-koyu); font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; transform: rotate(-2deg); }
.cd-etiket .canli-nokta { margin-right: 8px; }
.cd-qr { width: min(100%, 230px); margin: 0 auto; padding: 10px; background: var(--beyaz); border: 1px solid var(--oluk); border-radius: 8px; }
.cd-qr svg { display: block; width: 100%; height: auto; }
.cd-baslik { margin: 14px 0 0; font: 800 clamp(20px, 2vw, 26px)/1.1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: var(--golge); }
.cd-not { margin: 8px auto 0; max-width: 34ch; font-size: 14px; line-height: 1.45; color: var(--soluk); }
.cd-url { margin: 8px 0 0; font: 700 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; color: var(--murekkep-2); word-break: break-all; }
#canli-demo .oyna-giris { max-width: 74ch; }
#canli-demo .kartlar { margin-top: 30px; }
@media (max-width: 900px) { .cd-ic { grid-template-columns: 1fr; gap: 26px; } .cd-kart { max-width: 420px; justify-self: center; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .canli-nokta, .menu a.canli::before { animation: none; } }