:root { --lacivert: #0b4a4f; --turkuaz: #c94f32; --metin: #26302f; --soluk: #59645f; --krem: #fbf7ef; }
header a, nav a { pointer-events: auto; background: #fff; color: var(--lacivert); border-radius: 6px; padding: 8px 12px; font-weight: 600; text-decoration: none; }
nav { flex-wrap: wrap; justify-content: flex-end; }
dialog a { color: var(--lacivert); }
.form { display: grid; gap: 10px; margin-top: 10px; }
.form label { display: grid; gap: 3px; font-weight: 600; }
.form label.tik { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 14px; }
.form label.tik input { width: auto; margin-top: 3px; }
.form input, .form textarea { width: 100%; padding: 8px; border: 1px solid #cdc5b4; border-radius: 6px; font: inherit; }
.not { font-size: 13px; }
.hata { color: #a12c23 !important; font-weight: 600; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #d9d2c4; 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(11, 74, 79, .94), rgba(11, 74, 79, .7)); color: #fff; pointer-events: none; }
header div { display: grid; line-height: 1.25; }
header b { font-family: Georgia, serif; font-size: 21px; }
header span { font-size: 13px; opacity: .88; }
button { font: inherit; cursor: pointer; }
nav { display: flex; gap: 8px; flex: none; }
nav button { pointer-events: auto; background: #fff; color: var(--lacivert); border: 0; border-radius: 6px; padding: 8px 12px; font-weight: 600; }
#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(--turkuaz); color: #fff; border: 0; border-radius: 99px; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; }
#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(--turkuaz); cursor: pointer; }
#sepetDugme { pointer-events: auto; background: #fff; color: var(--lacivert); border: 0; border-radius: 6px; padding: 8px 12px; font-weight: 600; }
#sepetDugme b { font: inherit; color: var(--turkuaz); }
#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(32, 40, 46, .84); 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, .92); border-radius: 6px; font-weight: 600; pointer-events: none; }
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(10, 20, 28, .62); }
.resim { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--krem); }
.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: var(--turkuaz); 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); }
/* 04.11 on bilgilendirme kutusu (sepet penceresi) */
.on-bilgi { display: grid; gap: 6px; }
.on-bilgi pre { margin: 0; max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0,0,0,.05); border-radius: 6px; padding: 8px; font: 12px/1.45 "Segoe UI", system-ui, sans-serif; }