/* Shared stage of the case pages (2026-10-21, Kurallar 87): the look of assets/sahne.js. Everything here applies only once the script has
   put .sh-on on a [data-sahne] section, so a page without the script keeps its own full, stacked layout.
   Per-page colours (set them on the [data-sahne] element with any class selector; the defaults below sit in :where(), so they never win):
     --sh-cam        bar / panel ground (glass tint)         --sh-cam-k   the same without blur support (opaque)
     --sh-yazi       text on the bar and panel               --sh-cizgi   hairlines, rings
     --sh-secili     selected segment ground                 --sh-secili-y  its text
     --sh-font       the bar's typeface (default: inherit)   --sh-alt     where the bar sits from the bottom
   Layout of an item stays the page's own CSS (style `.sh-on .your-item`); this file only stacks the items, fades between them, brings the
   focus visual in (.sh-odak, via the individual translate/scale properties so a page's own `transform` still applies) and the text after it
   (.sh-rv). Motion: transform and opacity only; nothing loops. */

:where([data-sahne=""]) { --sh-cam: rgba(10, 12, 32, .55); --sh-cam-k: rgba(10, 12, 32, .92); --sh-yazi: #fff; --sh-cizgi: rgba(255, 255, 255, .18); --sh-secili: #fff; --sh-secili-y: #050511; --sh-font: inherit; --sh-alt: 18px; }
[data-buyut] { cursor: zoom-in; }

/* stacking */
.sh-on { position: relative; height: calc(var(--sh-n, 3) * var(--sh-adim, 1) * 100svh); }
.sh-on > .sh-pin { position: sticky; top: 0; height: 100svh; overflow: clip; }
.sh-on [data-sahne-oge] { position: absolute; inset: 0; min-height: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .55s var(--emph, ease), visibility 0s linear .55s; }
.sh-on [data-sahne-oge].on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .55s var(--emph, ease), visibility 0s; }
.sh-on [data-ay] { display: none; }
.sh-on .sh-odak { opacity: 0; translate: 0 28px; scale: .96; transition: opacity .5s var(--emph, ease), translate .9s var(--emph, ease), scale .9s var(--emph, ease); }
.sh-on .on .sh-odak { opacity: 1; translate: 0 0; scale: 1; }
.sh-on [data-sahne-oge]:not(.on) .sh-rv { opacity: 0 !important; transform: translateY(16px) !important; transition: opacity .3s var(--emph, ease), transform .3s var(--emph, ease) !important; transition-delay: 0s !important; }
.sh-on [data-sahne-oge].on .sh-rv { opacity: 1 !important; transform: none !important; transition: opacity .55s var(--emph, ease), transform .6s var(--emph, ease) !important; transition-delay: calc(.3s + var(--d, 0) * .1s) !important; }

/* the smart bar (floating dock) */
.sh-bar { position: fixed; z-index: 46; left: 50%; bottom: calc(var(--sh-alt) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
  background: var(--sh-cam-k); color: var(--sh-yazi); box-shadow: 0 0 0 1px var(--sh-cizgi), 0 18px 40px -14px rgba(0, 0, 0, .55); font: 500 13px/1 var(--sh-font);
  translate: -50% 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s var(--emph, ease), transform .45s var(--emph, ease), visibility 0s linear .3s; }
.sh-bar.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sh-bar .ti { width: 18px; height: 18px; }
.sh-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--sh-yazi) 8%, transparent); }
.sh-seg button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: color-mix(in srgb, var(--sh-yazi) 80%, transparent); font: inherit; letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: background-color .3s var(--emph, ease), color .3s var(--emph, ease); }
.sh-seg button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sh-yazi) 50%, transparent); }
.sh-seg button:hover { background: color-mix(in srgb, var(--sh-yazi) 10%, transparent); color: var(--sh-yazi); }
.sh-seg button[aria-checked="true"] { background: var(--sh-secili); color: var(--sh-secili-y); font-weight: 800; }
.sh-adim { display: flex; align-items: center; gap: 2px; }
.sh-say { display: flex; align-items: baseline; gap: 10px; min-width: 9.5em; max-width: 44vw; margin: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.sh-say b { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.sh-say span { overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--sh-yazi) 78%, transparent); }
.sh-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--sh-yazi); font: inherit; cursor: pointer; transition: background-color .25s var(--emph, ease); }
.sh-b[hidden] { display: none; }
.sh-adim .sh-b, .sh-buy-b { padding: 0; }
.sh-b:hover, .sh-b[aria-expanded="true"] { background: color-mix(in srgb, var(--sh-yazi) 14%, transparent); }
.sh-bar button:focus-visible { outline: 2px solid var(--sh-yazi); outline-offset: 2px; }

/* Ayrıntı panel (popover) */
.sh-sheet { position: absolute; left: 50%; bottom: calc(100% + 12px); width: min(420px, calc(100vw - 24px)); max-height: calc(100svh - var(--nav-h, 72px) - 110px); overflow: auto; padding: 20px 22px 22px; border-radius: 22px;
  background: var(--sh-cam-k); color: var(--sh-yazi); box-shadow: 0 0 0 1px var(--sh-cizgi), 0 24px 50px -18px rgba(0, 0, 0, .6); font: 500 14px/1.55 var(--sh-font);
  translate: -50% 0; transform-origin: 50% 100%; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .25s var(--emph, ease), transform .35s var(--emph, ease); }
.sh-sheet[hidden] { display: none; }
.sh-sheet.on { opacity: 1; transform: none; }
.sh-sheet-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 800; font-size: 12px; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
.sh-sheet-h i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.sh-sheet-bos { margin: 0; opacity: .75; }
.sh-sheet :is(.sh-rv, [class*="-rv"]) { opacity: 1 !important; transform: none !important; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sh-bar { background: var(--sh-cam); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
  .sh-sheet { background: color-mix(in srgb, var(--sh-cam-k) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
}
@media (max-width: 560px) {
  .sh-bar { left: 12px; translate: none; max-width: calc(100vw - 24px); --sh-alt: 12px; }
  .sh-seg button { padding: 0 11px; gap: 6px; }
  .sh-ay-b span { display: none; }
  .sh-ay-b { padding: 0; }
  .sh-say { min-width: 0; max-width: 46vw; }
  .sh-sheet { left: 0; translate: none; width: calc(100vw - 24px); }
}

/* full screen (canvas overlay): one dialog for the whole page */
.sh-ov { --o-yazi: #fff; width: min(94vw, 1240px); max-width: none; max-height: 94svh; padding: 0; border: 0; background: transparent; color: var(--o-yazi); overflow: visible; font: 500 15px/1.55 var(--sh-font, inherit); }
.sh-ov::backdrop { background: rgba(5, 5, 17, .88); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sh-ov::backdrop { background: rgba(5, 5, 17, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } }
.sh-ov-ic { display: grid; grid-template-columns: auto minmax(200px, 300px); gap: clamp(24px, 4vw, 48px); align-items: end; justify-content: center; }
.sh-ov-g { display: grid; place-items: center; }
.sh-ov-v, .sh-ov-i { display: block; max-width: min(64vw, 900px); max-height: 86svh; width: auto; height: auto; border-radius: 20px; background: #111; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.sh-ov-v { width: min(86svh, 64vw); }
.sh-ov-no { margin: 0 0 12px; font-size: 12px; line-height: 1; letter-spacing: .22em; opacity: .7; }
.sh-ov-h { margin: 0; font-weight: 800; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.08; }
.sh-ov-alt { margin: 14px 0 0; opacity: .8; }
.sh-ov-nav { display: flex; gap: 8px; margin-top: 24px; }
.sh-ov-nav[hidden] { display: none; }
.sh-ov-b, .sh-ov-x { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .25s var(--emph, ease); }
.sh-ov-b:hover, .sh-ov-x:hover { background: rgba(255, 255, 255, .24); }
.sh-ov .ti { width: 20px; height: 20px; }
.sh-ov-x { position: fixed; top: 18px; right: 18px; }
.sh-ov button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes shOv { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.motion .sh-ov[open] .sh-ov-ic { animation: shOv .5s var(--emph, ease); }
@media (max-width: 760px) {
  .sh-ov-ic { grid-template-columns: 1fr; gap: 20px; }
  .sh-ov-v, .sh-ov-i { max-width: 100%; width: 100%; }
  .sh-ov-alt { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-on [data-sahne-oge], .sh-on .sh-odak, .sh-on .sh-rv, .sh-bar, .sh-sheet { transition: none !important; }
}