*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:#0d0f11;
  font-family:"Helvetica Neue",Inter,system-ui,-apple-system,sans-serif;
  color:#f2efe9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ============================ HERO / 3B SAHNE ============================ */
#hero{position:relative;height:100vh;height:100dvh;overflow:hidden}
canvas#app{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

#titlecard{position:absolute;top:26px;left:28px;max-width:360px;z-index:3;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
.kicker{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.62;margin-bottom:9px}
#titlecard h1{font-size:31px;font-weight:250;letter-spacing:.035em;line-height:1}
#titlecard p{font-size:11.5px;line-height:1.65;opacity:.7;margin-top:11px;font-weight:300}
#titlecard .meta{margin-top:13px;display:flex;gap:16px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.5}
#titlecard .meta b{font-weight:500;opacity:1}
.cta-row{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:11px 20px;font-size:11.5px;letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:.2s;
  backdrop-filter:blur(10px);font-weight:400}
.btn.primary{background:rgba(232,184,119,.92);border-color:#e8b877;color:#191307;font-weight:600}
.btn.primary:hover{background:#e8b877}
.btn.ghost{background:rgba(16,18,20,.45);color:#f2efe9}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.wide{width:100%}
.btn.big{font-size:13px;padding:15px 30px;min-height:52px}

nav#views{position:absolute;left:28px;bottom:26px;z-index:3}
.grp-label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.45;margin-bottom:9px}
.btns{display:flex;flex-direction:column;gap:1px;width:196px}
.btns button{font:inherit;font-size:11px;letter-spacing:.06em;color:#f2efe9;cursor:pointer;
  background:rgba(255,255,255,.055);border:none;border-left:2px solid transparent;
  padding:8px 12px;text-align:left;backdrop-filter:blur(9px);transition:.18s;font-weight:300}
.btns button:hover{background:rgba(255,255,255,.14)}
.btns button.active{border-left-color:#e8b877;background:rgba(255,255,255,.13)}
.btns button .n{opacity:.4;margin-right:9px;font-size:9.5px}

#panel{position:absolute;right:26px;bottom:26px;width:268px;padding:15px 16px 13px;z-index:3;
  background:rgba(16,18,20,.5);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08)}
.row{display:block;margin-bottom:11px}
.row>span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;display:block;margin-bottom:8px}
.row em{font-size:10.5px;font-style:normal;opacity:.8;letter-spacing:.05em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:rgba(255,255,255,.2);margin:2px 0 7px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:#e8b877;cursor:pointer;box-shadow:0 0 0 4px rgba(232,184,119,.18)}
.toggles{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.toggles button{flex:1 1 auto;text-align:center;padding:6px 8px;font-size:9.5px;opacity:.45;color:#f2efe9;
  cursor:pointer;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);transition:.18s}
.toggles button.on{opacity:1;background:rgba(232,184,119,.16);border-color:rgba(232,184,119,.4)}
.hint{font-size:9px;letter-spacing:.13em;text-transform:uppercase;opacity:.32}

#paneltoggle{display:none;position:absolute;right:16px;bottom:16px;z-index:4;
  min-height:44px;padding:10px 16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#f2efe9;background:rgba(16,18,20,.55);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(9px);cursor:pointer}

#plan{position:absolute;top:24px;right:26px;width:clamp(210px,21vw,320px);cursor:pointer;z-index:5;
  background:rgba(16,18,20,.5);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);padding:10px 10px 9px;
  transition:opacity .45s,transform .45s,border-color .18s}
#plan img{display:block;width:100%;height:auto}
#plan .plabel{display:flex;align-items:baseline;margin:0 2px 8px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase}
#plan .plabel span{opacity:.55}
#plan .plabel em{margin-left:auto;font-style:normal;opacity:.32;letter-spacing:.13em}
#plan:hover{border-color:rgba(232,184,119,.35)}
#plan.gone{opacity:0;transform:translateY(-8px) scale(.985);pointer-events:none}
#planbtn{position:absolute;top:24px;right:26px;z-index:5;padding:10px 14px;min-height:44px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#f2efe9;cursor:pointer;
  background:rgba(16,18,20,.5);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(9px)}

#scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;opacity:.6;transition:.2s}
#scrollcue:hover{opacity:1}
#scrollcue i{font-style:normal;font-size:15px;animation:bob 1.6s infinite ease-in-out}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

#loader{position:fixed;inset:0;background:#0d0f11;display:flex;align-items:center;justify-content:center;
  z-index:40;transition:opacity .7s}
#loader.gone{opacity:0;pointer-events:none}
.lwrap{width:220px;text-align:center}
.lbar{height:1px;background:rgba(255,255,255,.15);overflow:hidden}
.lbar i{display:block;height:100%;width:30%;background:#e8b877;animation:sl 1.1s infinite ease-in-out}
@keyframes sl{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}
.ltxt{margin-top:13px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.45}

/* ============================ MOBİL ============================ */
@media (max-width:1023px){
  #titlecard{top:18px;left:18px;right:18px;max-width:none}
  #titlecard p{display:none}
  #titlecard .meta{display:none}
  #titlecard h1{font-size:26px}
  #plan,#planbtn{display:none}
  #scrollcue{display:none}

  nav#views{left:0;right:0;bottom:0;padding:0 12px calc(12px + env(safe-area-inset-bottom))}
  nav#views .grp-label{display:none}
  .btns{flex-direction:row;width:100%;overflow-x:auto;gap:6px;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .btns::-webkit-scrollbar{display:none}
  .btns button{flex:0 0 auto;min-height:44px;padding:10px 14px;font-size:11px;
    border-left:none;border-bottom:2px solid transparent;white-space:nowrap;
    background:rgba(16,18,20,.55)}
  .btns button.active{border-bottom-color:#e8b877}

  #paneltoggle{display:block;bottom:calc(66px + env(safe-area-inset-bottom))}
  #panel{right:12px;left:12px;width:auto;bottom:calc(120px + env(safe-area-inset-bottom));
    display:none}
  #panel.open{display:block}
  .toggles button{min-height:44px;font-size:10.5px}

}

/* ===================== ANA SAYFAYA GÖMÜLÜ (iframe) ===================== */
.yalniz-gomulu{display:none}
html.gomulu .yalniz-gomulu{display:inline-flex}
html.gomulu .yalniz-tam{display:none}
html.gomulu #scrollcue{display:none}
#zoomipucu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  padding:12px 18px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(16,18,20,.7);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(9px);
  pointer-events:none;opacity:0;transition:opacity .25s}
#zoomipucu.goster{opacity:1}