:root { --koyu: #14171c; --altin: #c9a35b; --metin: #20282e; --soluk: #65707a; --krem: #f5f0e6; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0f13; color: var(--metin); font: 16px/1.5 "Segoe UI", system-ui, sans-serif; }
#sahne { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#sahne:active { cursor: grabbing; }
header { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; background: linear-gradient(rgba(10, 12, 16, .9), rgba(10, 12, 16, 0)); color: #fff; pointer-events: none; }
header div { display: grid; line-height: 1.25; min-width: 0; }
header div b { font-family: Georgia, serif; font-size: 22px; color: #ecd7a6; }
header span { font-size: 13px; opacity: .84; }
nav { display: flex; gap: 8px; flex: none; }
button { font: inherit; cursor: pointer; }
nav button { pointer-events: auto; background: rgba(255, 255, 255, .95); color: var(--koyu); border: 0; border-radius: 6px; padding: 8px 12px; font-weight: 600; }
#sepetDugme b { color: #8a6a26; }
#ipucu { position: fixed; left: 50%; bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px)); transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); margin: 0; padding: 9px 14px; background: rgba(10, 12, 16, .82); color: #fff; border-radius: 6px; text-align: center; font-size: 14px; transition: opacity .5s; pointer-events: none; }
#ipucu.gizli { opacity: 0; }
#isim { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); margin: 0; padding: 6px 12px; background: rgba(255, 255, 255, .94); border-radius: 6px; font-weight: 600; pointer-events: none; }
#kontrol { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; align-items: center; }
#solDon, #sagDon { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #20282e; font-size: 16px; touch-action: none; user-select: none; -webkit-user-select: none; }
#ileri { padding: 13px 34px; background: var(--altin); color: #17120a; border: 0; border-radius: 99px; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; }
#ileri:active { background: #e3c27f; }
#isikKutu { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 6px; padding: 10px 6px; background: rgba(255, 255, 255, .88); color: #20282e; border-radius: 99px; font-size: 15px; line-height: 1; }
#isik { writing-mode: vertical-lr; direction: rtl; width: 28px; height: 140px; margin: 0; accent-color: var(--altin); cursor: pointer; }
dialog { border: 0; border-radius: 10px; padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); color: var(--metin); overflow: auto; }
dialog::backdrop { background: rgba(5, 7, 10, .72); }
.resim { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.ic { padding: 16px 18px 18px; }
.ic h2 { margin: 0 0 2px; font: 700 24px/1.2 Georgia, serif; }
.ic p { margin: 4px 0; color: var(--soluk); }
.fiyat { color: var(--metin) !important; font-size: 22px; font-weight: 700; margin-top: 10px !important; }
.dugmeler { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 14px; }
.ana { background: #8a6a26; color: #fff; border: 0; border-radius: 6px; padding: 11px; font-weight: 600; }
.ikinci { background: #fff; color: var(--metin); border: 1px solid #d9d4c8; border-radius: 6px; padding: 11px; }
.satir { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e5e0d6; }
#hata { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--krem); }
@media (max-width: 560px) { header span { display: none; } header div b { font-size: 17px; } nav { gap: 4px; } nav button { padding: 7px 8px; font-size: 13px; } }