/* ==========================================================================
   Prototip kabuğu: telefon çerçevesi, yan menü, durum çubuğu.
   Yalnızca sunum içindir, uygulamaya taşınmaz.
   ========================================================================== */
/* Kutu modeli yalnızca kabukta; ekranlar tarayıcı varsayılanıyla tasarlandı */
.sh-side, .sh-side *, .sh-cap, .sh-cap *, .sh-toast, .sh-phone { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Inter', system-ui, sans-serif; background: #EFE7DC; color: #211A14; overflow: hidden; -webkit-font-smoothing: antialiased; }
[data-theme="dark"] body { background: #0B0907; color: #F7E9D4; }

.sh { display: flex; height: 100%; }

/* ---- yan menü ---- */
.sh-side { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid rgba(33,26,20,.1); background: #FCF6EC; }
[data-theme="dark"] .sh-side { background: #15110D; border-color: rgba(247,233,212,.08); }
.sh-brand { padding: 22px 20px 14px; display: flex; align-items: center; gap: 10px; }
.sh-brand img { width: 34px; height: 34px; }
.sh-brand b { font: 800 18px/1.1 'Bricolage YE', 'Geologica', sans-serif; letter-spacing: -.02em; display: block; }
.sh-brand small { font-size: 12px; opacity: .6; }
.sh-tools { display: flex; gap: 6px; padding: 0 16px 12px; flex-wrap: wrap; }
.sh-btn { height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(33,26,20,.06); color: inherit; font: 600 13px/1 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
[data-theme="dark"] .sh-btn { background: rgba(247,233,212,.08); }
.sh-btn:hover { background: rgba(33,26,20,.1); }
.sh-nav { flex: 1; overflow-y: auto; padding: 4px 10px 30px; }
.sh-faz { margin: 18px 10px 0; padding: 8px 10px; border-radius: 10px; background: #211A14; color: #F7E9D4; font: 800 13px/1 'Bricolage YE', 'Geologica', sans-serif; letter-spacing: .02em; }
[data-theme="dark"] .sh-faz { background: #F7E9D4; color: #211A14; }
.sh-faz:first-child { margin-top: 4px; }
.sh-grp { margin-top: 10px; }
.sh-grp-t { font: 700 11px/1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .08em; opacity: .5; padding: 10px 10px 6px; }
.sh-nav a { display: block; padding: 7px 10px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 13px; line-height: 1.3; }
.sh-nav a:hover { background: rgba(33,26,20,.06); }
[data-theme="dark"] .sh-nav a:hover { background: rgba(247,233,212,.06); }
.sh-nav a.on { background: #C01717; color: #fff; }

/* ---- sahne + telefon ---- */
.sh-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; position: relative; }
.sh-phone-wrap { width: calc(418px * var(--phone-scale, 1)); height: calc(872px * var(--phone-scale, 1)); }
.sh-phone { width: 418px; height: 872px; padding: 14px; border-radius: 62px; background: #1a1410; box-shadow: 0 0 0 1.5px #3a3029, 0 40px 90px -30px rgba(0,0,0,.55); transform: scale(var(--phone-scale, 1)); transform-origin: 0 0; position: relative; }
.sh-screen { box-sizing: content-box; position: relative; width: 390px; height: 844px; border-radius: 48px; overflow: hidden; background: #fff; isolation: isolate; }
[data-theme="dark"] .sh-screen { background: #15110D; }
.sh-layers { position: absolute; inset: 0; }
.sh-layer { position: absolute; inset: 0; background: inherit; }
.sh-shade { position: absolute; inset: 0; background: rgba(0,0,0,.18); pointer-events: none; z-index: 50; }
.sh-sb { position: absolute; left: 0; right: 0; top: 0; height: 50px; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 36px; color: #000; pointer-events: none; font: 600 16px/1 -apple-system, 'Inter', sans-serif; }
.sh-sb-i { display: flex; gap: 6px; align-items: center; }
.sh-island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; z-index: 61; pointer-events: none; }
.sh-home { position: absolute; bottom: 8px; left: 50%; width: 136px; height: 5px; margin-left: -68px; border-radius: 3px; background: #000; z-index: 60; pointer-events: none; opacity: .85; }
.sh-phone.sb-light .sh-sb { color: #fff; }

/* Android: durum çubuğu solda saat + sağda simgeler, ada yok, ince hareket çubuğu */
.sh-sb-and { display: none; }
.sh-phone.is-android .sh-island, .sh-phone.is-android .sh-sb { display: none; }
.sh-phone.is-android .sh-sb-and { display: flex; position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 60; padding: 0 24px; align-items: center; justify-content: space-between; color: #211A14; font: 600 14px/1 'Inter', sans-serif; pointer-events: none; }
.sh-phone.is-android.sb-light .sh-sb-and { color: #F7E9D4; }
.sh-phone.is-android .sh-home { width: 108px; height: 4px; margin-left: -54px; opacity: .55; }
.sh-phone.is-android .sh-screen { border-radius: 36px; }
.sh-phone.no-chrome .sh-island, .sh-phone.no-chrome .sh-sb, .sh-phone.no-chrome .sh-sb-and, .sh-phone.no-chrome .sh-home { display: none; }
.sh-phone.hb-light .sh-home { background: #fff; }

.sh-cap { display: flex; align-items: center; gap: 10px; }
.sh-cap-txt { text-align: center; min-width: 220px; }
.sh-cap-t { font-weight: 700; font-size: 14px; }
.sh-cap-s { font-size: 12px; opacity: .6; }
.sh-arrow { width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgba(33,26,20,.08); color: inherit; font-size: 18px; cursor: pointer; }
[data-theme="dark"] .sh-arrow { background: rgba(247,233,212,.1); }

/* ---- tasarım sistemi görünümü ---- */
.sh-ds { display: none; position: absolute; inset: 0; overflow: auto; background: #FCF6EC; }
.v-ds .sh-ds { display: block; }
.v-ds .sh-phone-wrap, .v-ds .sh-cap { visibility: hidden; }
.sh-ds-in { width: 1440px; margin: 0 auto; }
.sh-ds-in a { color: #C01717; }

.sh-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 99; background: #211A14; color: #F7E9D4; font: 500 14px/1.35 'Inter', sans-serif; padding: 12px 18px; border-radius: 12px; transition: .25s; pointer-events: none; }
.sh-toast.on { opacity: 1; transform: translate(-50%, 0); }
.sh-menu { display: none; }

/* ---- telefon / dar ekran: tam ekran uygulama gibi ---- */
body.mobile .sh-side { position: fixed; inset: 0 auto 0 0; z-index: 80; transform: translateX(-100%); transition: transform .3s cubic-bezier(.32,.72,0,1); box-shadow: 0 0 40px rgba(0,0,0,.3); }
body.mobile.nav-open .sh-side { transform: none; }
body.mobile .sh-stage { gap: 0; }
body.mobile .sh-cap { display: none; }
body.mobile .sh-phone-wrap { width: calc(390px * var(--phone-scale)); height: calc(844px * var(--phone-scale)); }
body.mobile .sh-phone { width: 390px; height: 844px; padding: 0; border-radius: 0; box-shadow: none; background: none; }
body.mobile .sh-screen { border-radius: 0; }
body.mobile .sh-island, body.mobile .sh-sb, body.mobile .sh-home { display: none; }
body.mobile .sh-menu { display: flex; position: fixed; left: 6px; top: 50%; z-index: 70; width: 18px; height: 56px; margin-top: -28px; border: 0; border-radius: 9px; background: rgba(33,26,20,.35); padding: 0; cursor: pointer; }