/* Açılış QR'ının açtığı "kendi etiketini yap" deneyimi (/merhaba) ve deneme ürün sayfası (/dene) */
:root { --dy-renk: #E8A317; --dy-koyu: #8A5A00; }
body.deneyim { margin: 0; background: #111216; color: #fff; font-family: Figtree, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
body.deneyim.dm-sayfa { background: #F6F4EF; color: #111216; }
.dy { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden; }
.dy-ekran { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; padding: 18px 20px 26px; display: flex; flex-direction: column; gap: 16px; }
.dy-ekran[hidden] { display: none; }
.dy-ekran.orta { align-items: center; justify-content: center; gap: 30px; }
.dy-logo { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px; }
.dy-baslik { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; margin: 0; line-height: 1.02; font-size: 44px; }
.dy-baslik.orta-boy { font-size: 34px; } .dy-baslik span { color: #E8A317; }
.dy-ekran p { margin: 0; font-size: 17px; line-height: 1.5; color: #E6E3DC; } .dy-ekran p b { color: #fff; }
.dy-rozet { align-self: flex-start; border: 1px solid #3A3C44; border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 700; color: #F6C95E; }
.dy-bosluk { flex: 1; } .dy-bosluk.kucuk { min-height: 4px; }
.dy-not { text-align: center; font-size: 13px; color: #A9A6A0; }
.dy-ust { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #F6C95E; }
.dy-metin { background: none; border: 0; color: #C9C6BF; font: inherit; font-weight: 700; font-size: 15px; letter-spacing: 0; cursor: pointer; padding: 8px 0; }

.dy-btn { display: block; text-align: center; text-decoration: none; font: inherit; font-weight: 800; font-size: 17px; border-radius: 14px; padding: 16px; border: 0; cursor: pointer; width: 100%; box-sizing: border-box; transition: transform .1s; }
.dy-btn:active { transform: scale(.98); }
.dy-btn.amber { background: #E8A317; color: #111216; } .dy-btn.amber:hover { background: #F6C95E; }
.dy-btn.cizgi { background: transparent; color: #fff; border: 1px solid #3A3C44; }
.dy-btn.metin-btn { background: none; color: #F6C95E; padding: 6px; }
.dy-btn.yesil-btn { background: #1F7A4A; color: #fff; } .dy-btn.acik-cizgi { background: #fff; color: #111216; border: 1px solid #D9D4C9; }

.dy-nabiz-kutu { position: relative; height: 250px; display: grid; place-items: center; margin-top: 4px; }
.dy-nabiz { position: absolute; width: 190px; height: 190px; border-radius: 50%; border: 2px solid #E8A317; animation: nabiz 2.4s ease-out infinite; }
.dy-nabiz.ikinci { animation-delay: 1.2s; }
.dy-qr-kart { position: relative; width: 150px; height: 150px; border-radius: 28px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 60px rgba(232,163,23,.35); }
.dy-qr-kart img { width: 124px; height: 124px; }

.dy-sahne { background: #1C1E25; border-radius: 22px; padding: 96px 0 22px; display: flex; justify-content: center; }
.dy-etiket { position: relative; width: 236px; background: #fff; color: #111216; border-radius: 20px; padding: 26px 18px 16px; box-shadow: 0 30px 70px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 8px; transform-origin: 50% -85px; box-sizing: border-box; }
.dy-etiket.genis { width: 256px; }
.dy-ip { position: absolute; left: 50%; top: -58px; width: 2px; height: 58px; margin-left: -1px; background: linear-gradient(#5E616B, #A9A6A0); }
.dy-delik { position: absolute; top: 10px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #111216; border: 3px solid #3A3C44; box-sizing: border-box; }
.dy-etiket-yan { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.dy-qr-yer { width: 84px; height: 84px; flex: none; border-radius: 8px; background: repeating-linear-gradient(45deg, #EFECE5 0 6px, #F6F4EF 6px 12px); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #A9A6A0; text-align: center; }
.dy-etiket-bilgi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dy-dukkan { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--dy-koyu); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-urun { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.dy-fiyat { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; border-radius: 8px; white-space: nowrap; }
.dy-satir { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .dy-satir .dy-fiyat { font-size: 22px; padding: 0 4px; }
.dy-serit { border-top: 3px solid var(--dy-renk); padding-top: 6px; font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; }
.dy-az-once { color: #1F7A4A; }
.dy-qr, .dy-qr-cizim img { width: 100%; aspect-ratio: 1; display: block; margin-top: 6px; }
.dy-qr-cizim { position: relative; }

.dy-grup { display: flex; flex-direction: column; gap: 8px; }
.dy-etiket-ad, .dy-girdi { font-size: 13px; font-weight: 700; color: #C9C6BF; }
.dy-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.dy-cip { border: 1px solid #3A3C44; background: transparent; color: #E6E3DC; border-radius: 99px; padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dy-cip.on { background: var(--dy-renk); border-color: var(--dy-renk); color: #111216; }
.dy-girdi { display: flex; flex-direction: column; gap: 6px; }
.dy-girdi input { min-height: 50px; border-radius: 12px; border: 1px solid #3A3C44; background: #1C1E25; color: #fff; padding: 0 14px; font: inherit; font-size: 17px; font-weight: 600; outline: none; }
.dy-girdi input:focus { border-color: #E8A317; box-shadow: 0 0 0 3px rgba(232,163,23,.25); }
.dy-girdi input.salla { animation: salla .4s; border-color: #F26B5B; }

.dy-baski-yazi { text-align: center; display: flex; flex-direction: column; gap: 6px; color: #A9A6A0; } .dy-baski-yazi .dy-baslik { font-size: 26px; color: #fff; }
.dy-yagmur span { position: absolute; top: -20px; width: 9px; height: 9px; background: #E8A317; border-radius: 2px; opacity: 0; animation: yagmur 3.2s linear infinite; }
.dy-yagmur span.beyaz { background: #fff; }
.dy-kaydir { background: #fff; color: #111216; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dy-kaydir b { font-size: 16px; } .dy-kaydir span { font-size: 14px; color: #5E616B; line-height: 1.45; }
.dy-kaydir input { width: 100%; accent-color: #E8A317; height: 28px; }

/* Deneme ürün sayfası (/dene) */
.dm { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.dm-ust { background: #111216; color: #A9A6A0; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.dm-geri { color: #F6C95E; font-weight: 700; text-decoration: none; padding: 6px 0; }
.dm-bas { padding: 18px 18px 6px; display: flex; align-items: center; gap: 12px; }
.dm-bas div { display: flex; flex-direction: column; } .dm-bas b { font-size: 17px; } .dm-bas div span { font-size: 13px; color: #5E616B; }
.dm-harf { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--dy-renk); display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px; }
.dm-foto { margin: 10px 18px; height: 210px; border-radius: 18px; background: repeating-linear-gradient(135deg, #EFECE5 0 10px, #F6F4EF 10px 20px); display: grid; place-items: center; color: #A9A6A0; font-size: 13px; font-weight: 700; }
.dm-icerik { padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.dm-icerik .dy-baslik { font-size: 30px; overflow-wrap: anywhere; }
.dm-icerik p { margin: 0; font-size: 15px; line-height: 1.5; color: #5E616B; }
.dm-fiyat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dm-fiyat b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 36px; }
.dm-cip { align-self: flex-start; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.dm-cip.yesil { background: #E3F2E9; color: #1F7A4A; } .dm-cip.sari { background: #FFF4D6; color: #8A5A00; }
.dm-imza { margin: auto 18px 20px; background: #111216; color: #fff; text-decoration: none; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; }
.dm-imza b { color: #F6C95E; }

/* Hareket */
.salin { animation: salin 4.5s ease-in-out infinite; }
.dus { animation: dus 1.1s cubic-bezier(.2,.9,.3,1.25) both, salin 4.5s ease-in-out 1.1s infinite; }
.qr-ciz { animation: ciz 1.4s steps(14) .5s both; }
.tara { position: absolute; left: 0; right: 0; height: 3px; background: #E8A317; box-shadow: 0 0 18px 4px rgba(232,163,23,.7); animation: tara 1.4s linear .5s both; }
.yuksel { animation: yuksel .7s ease-out both; } .yuksel.g2 { animation-delay: .15s; } .yuksel.g3 { animation-delay: .3s; }
.parlaA { animation: parlaA .9s ease-out; } .parlaB { animation: parlaB .9s ease-out; }
.yaziyor::after { content: ''; display: inline-block; width: 2px; height: 1em; background: #E8A317; margin-left: 2px; vertical-align: -2px; animation: imlec 1s steps(1) infinite; }
@keyframes salin { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } }
@keyframes dus { 0% { transform: translateY(-520px) rotate(-18deg); opacity: 0; } 60% { transform: translateY(18px) rotate(7deg); opacity: 1; } 80% { transform: translateY(-6px) rotate(-5deg); } 100% { transform: translateY(0) rotate(-4deg); } }
@keyframes ciz { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tara { from { top: 0; opacity: 1; } 95% { opacity: 1; } to { top: 100%; opacity: 0; } }
@keyframes nabiz { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes yuksel { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes parlaA { 0% { background: #FFE7A8; transform: scale(1.06); } 100% { background: transparent; transform: none; } }
@keyframes parlaB { 0% { background: #FFE7A8; transform: scale(1.06); } 100% { background: transparent; transform: none; } }
@keyframes yagmur { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(110vh) rotate(240deg); opacity: 0; } }
@keyframes imlec { 50% { opacity: 0; } }
@keyframes salla { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.dm-imza > span { color: #E6E3DC; }
.ip-dugum { position: absolute; top: -85px; left: 50%; width: 60px; height: 114px; margin-left: -30px; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.dy-etiket.dus { margin-top: 90px; }