/* Device detail popup, shared by index.html and aparati.html */
.dev-modal-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(10,18,40,.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.dev-modal-overlay.open { opacity: 1; pointer-events: auto; }
.dev-modal { background: var(--white); border-radius: var(--radius-lg); max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 40px 40px 32px; box-shadow: var(--shadow-lg); position: relative; transform: translateY(16px); transition: transform .3s; }
.dev-modal-overlay.open .dev-modal { transform: translateY(0); }
.dev-modal-close { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--light); color: var(--text-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.dev-modal-close:hover { background: var(--mid); color: var(--text); }
.dm-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; padding-right: 30px; }
.dm-icon { width: 84px; height: 84px; border-radius: var(--radius); background: var(--blue-ultra); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; }
.dm-emoji { font-size: 2rem; opacity: .45; }
.dm-name { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--text); line-height: 1.1; }
.dm-type { font-size: .8rem; color: var(--blue-mid); font-weight: 500; margin-top: 5px; }
.dm-desc { font-size: .9rem; color: var(--text-soft); line-height: 1.75; margin-bottom: 22px; }
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 20px; }
.dm-h { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-mid); font-weight: 600; margin-bottom: 10px; }
.dm-list { list-style: none; }
.dm-list li { font-size: .84rem; color: var(--text-soft); padding: 5px 0 5px 18px; position: relative; line-height: 1.5; }
.dm-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-light); }
.dm-included { background: var(--off-white); border: 1.5px solid var(--mid); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; }
.dm-inc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.dm-inc li::before { background: var(--teal); }
.dm-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1.5px solid var(--mid); padding-top: 20px; }
.dm-price { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--text); }
.dm-price.req { font-size: 1rem; font-family: 'Outfit', sans-serif; font-weight: 500; color: var(--blue-mid); }
.dm-req { background: var(--blue); color: var(--white); border: none; padding: 13px 28px; border-radius: 100px; font-family: 'Outfit', sans-serif; font-size: .85rem; font-weight: 500; cursor: pointer; transition: background .3s, box-shadow .3s, transform .2s; }
.dm-req:hover { background: var(--blue-mid); box-shadow: 0 8px 24px rgba(26,74,138,.3); transform: translateY(-2px); }
@media (max-width: 600px) { .dm-grid { grid-template-columns: 1fr; } .dm-inc { grid-template-columns: 1fr; } .dev-modal { padding: 32px 24px 24px; } }
.dm-icon { position: relative; }
.dm-emoji-fallback { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.dm-photo { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.dm-grid.one { grid-template-columns: 1fr; }