body.x3d{overflow:hidden;background:#E9E4D8;height:100svh}
#c3d{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#c3d:active{cursor:grabbing}
.x3d .nav{transform:translate(-50%,0)}
.x3d .nav__menu{font-size:var(--fs-cs)}

.compass{position:fixed;top:18px;right:18px;z-index:40;width:220px;background:rgba(250,246,236,.92);backdrop-filter:blur(8px);border-radius:20px;padding:14px 16px 16px;text-align:center;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.compass p{font:400 var(--fs-cs)/var(--lh-cs) var(--sans);color:var(--bronze);margin-bottom:10px}
.compass__ring{position:relative;width:86px;height:86px;margin:0 auto 12px;border-radius:50%;border:1px solid rgba(168,131,79,.4);background:radial-gradient(circle,rgba(168,131,79,.08),transparent 70%)}
.compass__ring::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--teal)}
.compass__n{position:absolute;left:50%;top:4px;transform:translateX(-50%);font:500 11px var(--sans);color:var(--bronze);transform-origin:50% 39px}
.compass__presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.compass__presets button{height:30px;border-radius:999px;border:1px solid rgba(30,38,36,.18);background:none;font:400 var(--fs-cs)/var(--lh-cs) var(--sans);cursor:pointer;color:var(--ink)}
.compass__presets button:hover,.compass__presets button.on{background:var(--ink);color:var(--cream)}

.dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;display:flex;gap:10px;align-items:center;background:rgba(250,246,236,.94);backdrop-filter:blur(8px);border-radius:999px;padding:8px;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.dock__btn{height:42px;padding:0 20px;border-radius:999px;border:1px solid var(--bronze);background:none;font:700 var(--fs-cs)/var(--lh-cs) var(--sans);color:var(--ink);cursor:pointer}
.dock__btn i{font-style:normal;margin-left:6px}
.dock__btn.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.dock__sun{display:flex;align-items:center;gap:10px;padding:0 14px 0 6px;color:var(--bronze)}
.dock__sun b{font:400 var(--fs-cs)/var(--lh-cs) var(--sans);color:var(--ink);min-width:44px}
#sun{-webkit-appearance:none;appearance:none;width:170px;height:2px;background:linear-gradient(90deg,var(--bronze2),var(--teal));border-radius:2px}
#sun::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--teal);border:3px solid var(--cream);box-shadow:0 0 0 1px var(--teal)}

.plist{position:fixed;left:18px;bottom:84px;z-index:40;width:280px;max-height:60vh;overflow:auto;background:rgba(250,246,236,.95);backdrop-filter:blur(8px);border-radius:20px;padding:18px;box-shadow:0 20px 40px -24px rgba(0,0,0,.35);transition:.4s var(--ease)}
.plist.hide{opacity:0;transform:translateY(16px);pointer-events:none}
.plist ul{list-style:none}
.plist li{display:flex;justify-content:space-between;align-items:baseline;padding:9px 6px;border-bottom:1px solid rgba(30,38,36,.1);cursor:pointer;transition:.3s}
.plist li b{font:400 var(--fs-hm)/var(--lh-hm) var(--serif);letter-spacing:0;color:var(--bronze);margin-right:10px}
.plist li span{flex:1;font-size:var(--fs-cs)}
.plist li small{font-size:var(--fs-cs);color:var(--ink2)}
.plist li:hover,.plist li.on{background:rgba(20,82,78,.08);padding-left:12px}
.plist li.on b{color:var(--teal)}

.ucard{position:fixed;right:18px;bottom:84px;z-index:41;width:min(340px,calc(100% - 36px));background:var(--cream);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.45);opacity:0;transform:translateY(20px);pointer-events:none;transition:.45s var(--ease)}
.ucard.on{opacity:1;transform:none;pointer-events:auto}
.ucard img{width:100%;height:150px;object-fit:cover}
.ucard__x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(30,38,36,.75);color:var(--cream);font-size:20px;cursor:pointer}
.ucard__in{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px}
.ucard__in .eyebrow{margin:0;font-size:var(--fs-cs)}
.ucard h3{font:400 var(--fs-hl)/var(--lh-hl) var(--serif);letter-spacing:0;color:var(--bronze)}
.ucard h3 small{font:400 var(--fs-cs)/var(--lh-cs) var(--sans);color:var(--ink2);margin-left:10px}
.ucard__facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(30,38,36,.12);border-radius:12px;overflow:hidden}
.ucard__facts div{background:var(--cream);padding:10px 12px}
.ucard__facts b{display:block;font:400 var(--fs-hm)/var(--lh-hm) var(--serif);letter-spacing:0}
.ucard__facts span{font-size:var(--fs-cs);color:var(--ink2)}
.ucard__in>p{font-size:var(--fs-cs);color:var(--ink2)}
.ucard .btn{height:46px}
.btn--line{border:1px solid var(--ink);color:var(--ink);background:none}
.btn--line:hover{background:var(--ink);color:var(--cream)}

.hint{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:30;font-size:var(--fs-cs);color:var(--ink2);background:rgba(250,246,236,.8);padding:6px 14px;border-radius:999px;transition:opacity 1s}
.hint.off{opacity:0}
.disc3d{position:fixed;left:18px;bottom:22px;z-index:30;font-size:var(--fs-cs);color:var(--ink2);opacity:.7;max-width:240px}

.tag3d{position:fixed;z-index:35;transform:translate(-50%,-120%);pointer-events:none;background:var(--teal);color:var(--cream);font:400 var(--fs-cs)/var(--lh-cs) var(--sans);padding:6px 10px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .25s}
.tag3d.on{opacity:1}

@media (max-width:760px){
  .compass{top:84px;bottom:auto;right:12px;width:132px;padding:8px}
  .hint{top:auto;bottom:84px;width:max-content;max-width:calc(100% - 24px);text-align:center}
  .compass__ring{width:56px;height:56px}
  .compass__n{transform-origin:50% 24px}
  .compass__presets button{font-size:var(--fs-cs);height:26px}
  .plist{left:12px;right:12px;width:auto;bottom:84px;max-height:42vh}
  .ucard{right:12px;left:12px;width:auto;bottom:84px}
  .ucard img{display:none}
  .ucard__x{background:rgba(30,38,36,.12);color:var(--ink)}
  .ucard h3{font-size:var(--fs-hm);line-height:var(--lh-hm)}
  .ucard__in{gap:8px;padding:14px 16px}
  .ucard__in>p{display:none}
  #sun{width:110px}
  .dock{width:calc(100% - 24px);justify-content:space-between}
  .disc3d{display:none}
}
.fallback3d{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;padding:30px;background:var(--paper)}.fallback3d h1{font:400 var(--fs-hl)/var(--lh-hl) var(--serif);letter-spacing:0}.fallback3d p{max-width:440px}.fallback3d .btn{min-width:230px}.x3d .ucard{max-height:calc(100dvh - 180px);overflow-y:auto}.x3d .compass__presets button{min-height:40px}.x3d #punits li{min-height:46px}.x3d .ucard__x{width:44px;height:44px}.x3d .dock__sun{gap:10px}.x3d #sunLbl{min-width:48px;font-size:var(--fs-cs)}.x3d .disc3d{max-width:280px;font-size:var(--fs-cs);line-height:var(--lh-cs)}.x3d #sun{touch-action:pan-x}.x3d .plist.hide,.x3d .ucard:not(.on){visibility:hidden}
@media(max-width:1100px){.x3d .compass{top:90px;width:160px;right:16px}.x3d .compass__ring{display:none}.x3d .hint{top:90px;left:20px;transform:none;max-width:calc(100% - 215px)}}
@media(max-width:760px){.x3d .nav{top:10px;height:54px;padding:0 14px}.x3d .nav__cta{font-size:var(--fs-cs);min-height:36px}.x3d .compass{top:76px;width:140px;right:12px}.x3d .compass__presets button{min-height:40px}.x3d .dock{bottom:calc(14px + env(safe-area-inset-bottom));gap:10px}.x3d .plist,.x3d .ucard{bottom:calc(82px + env(safe-area-inset-bottom));max-height:calc(100dvh - 160px)}.x3d .ucard__in>p{display:block;font-size:var(--fs-cs);padding-right:16px}.x3d .ucard__in .eyebrow{padding-right:45px}.x3d .hint{top:76px;left:14px;max-width:calc(100% - 180px);font-size:var(--fs-cs)}.x3d .dock__btn{font-size:var(--fs-cs);padding:0 12px}.x3d #sun{width:90px}}
@media(max-height:540px) and (orientation:landscape){.x3d .compass{top:80px;width:140px}.x3d .plist,.x3d .ucard{max-height:calc(100dvh - 150px);width:270px}.x3d .ucard img{display:none}.x3d .hint{display:none}}
@media(max-width:360px){.x3d .nav{gap:8px;padding:0 12px}.x3d .nav__menu{font-size:var(--fs-cs)}.x3d .nav__cta{font-size:var(--fs-cs);padding:8px;gap:6px}.x3d .dock{padding-inline:9px;gap:5px}.x3d #sun{width:74px}.x3d .dock__sun{gap:6px}}

.plist li button{display:flex;justify-content:space-between;align-items:baseline;width:100%;padding:0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}

/* v2 uyumu */
.x3d .nav__cta{border-radius:999px;padding:0 18px;height:40px;display:inline-flex;align-items:center;gap:12px;border:1px solid #f3efe659}
.ucard .btn{height:52px;border-radius:999px;justify-content:center}
.compass,.plist,.ucard{border-radius:24px}
.plist li b,.ucard h3{letter-spacing:-.03em}
.ucard h3{font-size:clamp(2.6rem,1.6rem + 2vw,3.6rem);line-height:1}
.ucard h3 small{letter-spacing:.01em;font-size:var(--fs-cs)}
.ucard__facts b{font-size:clamp(1.4rem,1rem + .8vw,1.8rem);white-space:nowrap}
.disc3d{background:#f3efe6d9;color:var(--ink2);opacity:1;padding:8px 14px;border-radius:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}