/* Vitrin kopyasına özel: Oyna düğmesi, ipucu şeridi ve oyun sırasında vitrin kabuğunun gizlenmesi. */
.igne-arac { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 10px; }
.igne-oyna { --igne: #e4572e; display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: 999px; background: var(--igne); color: #fff; font: 700 15px/1 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; box-shadow: 0 5px 0 color-mix(in srgb, var(--igne) 55%, #000); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.igne-oyna:hover { transform: translateY(-2px); box-shadow: 0 7px 0 color-mix(in srgb, var(--igne) 55%, #000); }
.igne-oyna:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--igne) 55%, #000); }
.igne-oyna svg { color: #fff; }
.igne-kalite { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--alan-kenar); border-radius: 999px; background: color-mix(in srgb, var(--kagit) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--metin); font: 600 14px/1 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.igne-kalite:hover:not(:disabled) { border-color: var(--metin); }
.igne-kalite[aria-pressed="true"] { border-color: var(--murekkep); background: color-mix(in srgb, var(--murekkep) 14%, var(--kagit)); color: var(--murekkep); }
.igne-kalite[aria-pressed="true"] span::before { content: '\2713\00a0'; }
.igne-kalite[disabled] { opacity: .5; cursor: progress; }
.igne-oyna[aria-busy="true"] { opacity: .8; cursor: progress; }
.igne-oyna[aria-busy="true"]::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: igneDon .8s linear infinite; }
@keyframes igneDon { to { transform: rotate(360deg); } }
.igne-oyna[disabled] { opacity: .5; cursor: progress; box-shadow: none; transform: none; }

/* Oyun sırasında: üst menü yer kaplamaya devam eder (içerik zıplamasın) ama görünmez; örtü ve çerçeve kapanır */
html.oyunda .ust { visibility: hidden; }
html.oyunda .perde, html.oyunda .sahne, html.oyunda .arama, html.oyunda .igne-arac { display: none !important; }
html.oyunda main *, html.oyunda .dip, html.oyunda .dip * { pointer-events: none !important; }   /* oyun sırasında form alanları odak çalmasın */
html.oyunda .kart, html.oyunda .kart * { transition: none !important; animation: none !important; }   /* hover genişlemeleri ölçümü bozmasın */

.igne-ipucu { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 70; transform: translateX(-50%); width: max-content; max-width: min(92vw, 640px); padding: 11px 18px; border-radius: 12px; background: color-mix(in srgb, var(--metin) 90%, transparent); color: var(--kagit); font: 600 14px/1.4 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; text-align: center; pointer-events: none; animation: igneIpucu 9s ease both; }
/* dokunmatikte alt köşeler düğmelerindir: şerit üstte durur */
.igne-ipucu-dk { bottom: auto; top: calc(104px + env(safe-area-inset-top, 0px)); }
@keyframes igneIpucu { 0% { opacity: 0; translate: 0 10px; } 6%, 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .igne-ipucu, .igne-oyna[aria-busy="true"]::after { animation: none; } }