/* ============================================================================
   HOGEON — 3B gözlük sahnesi (deneme, 01.11.2026)
   Giriş ekranı + kaydırmaya bağlı sahne: js/gozluk-3b.js. Sahne yalnız html.g3-acik
   varken görünür (kararı index.html <head> verir); yoksa bölüm gizli, giriş eski hâlidir.
   KALDIRMAK: index.html'de #gozluk3b bölümü, <head>'deki küçük betik, bu dosyanın ve
   betiğin etiketleri.
   ============================================================================ */
html.g3-acik #gozluk3b[hidden]{display:block}
#gozluk3b{position:relative;padding:0;background:#0B1220;color:#EEF3F8}
/* Üst çubuk yapışkan ve akışta: sahne sayfanın en tepesinden başlasın, kayınca sıçramasın. */
html.g3-acik #gozluk3b{margin-top:-73px}
.g3-iz{position:relative;height:calc(var(--g3-adim,10) * 46vh + 100vh)}
.g3-sahne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(70% 70% at 72% 46%,#22344C 0%,#0B1220 72%)}
/* Dosyalar inene kadar: gözlüğün geleceği yerde, belirgin. */
.g3-yuk{position:absolute;left:72.5%;top:47%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 30px;border-radius:18px;
  font-size:19px;font-weight:700;letter-spacing:.01em;color:#fff;background:rgba(8,13,26,.6);border:1px solid rgba(166,230,127,.5);box-shadow:0 18px 50px rgba(0,0,0,.35);pointer-events:none;transition:opacity .4s}
.g3-yuk i{width:40px;height:40px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:#A6E67F;animation:g3Don .8s linear infinite}
.g3-yuk.bitti{opacity:0}
@keyframes g3Don{to{transform:rotate(360deg)}}
.g3-sahne canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .7s ease}
.g3-sahne canvas.hazir{opacity:1}
.g3-orti{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,13,26,.78) 0%,rgba(8,13,26,.42) 30%,rgba(8,13,26,0) 52%)}
/* Açık zeminli adım: yazı koyu kalsın diye ikinci kat. */
.g3-orti::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:linear-gradient(90deg,rgba(8,13,26,.7) 0%,rgba(8,13,26,.62) 34%,rgba(8,13,26,0) 54%)}
.g3-orti.koyu::after{opacity:1}

/* ── Giriş: sahnenin üstüne biner, sayfayla birlikte yukarı kayar, betik soldurur ── */
html.g3-acik .hero{
  position:absolute;top:0;left:0;right:0;z-index:2;
  min-height:100vh;min-height:100svh;
  padding:calc(73px + 2vh) 0 4vh;
  display:flex;align-items:center;pointer-events:none;
  --fg:#EEF3F8;--fg-2:#C9D4E2;--fg-3:#9FB0C4;--line:rgba(255,255,255,.16);
}
html.g3-acik .hero .wrap{width:100%}
html.g3-acik .hero-grid{display:block}
html.g3-acik .hero-grid>div:first-child{max-width:min(520px,43vw)}
html.g3-acik .hero-visual{display:none}
html.g3-acik .hero a{pointer-events:auto}
html.g3-acik .hero h1{color:#fff}
html.g3-acik .hero h1 .hl{background:linear-gradient(135deg,#C4F2A6,#6CC037);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html.g3-acik .hero .badge{background:rgba(82,181,61,.18);border-color:rgba(108,192,55,.45);color:#D7F2C8}
html.g3-acik .hero .hero-note b{color:#fff}
html.g3-acik .hero .hero-stats div span{color:var(--brand-300)}
html.g3-acik .hero .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
html.g3-acik .hero .btn-ghost:hover{background:rgba(255,255,255,.16)}

.g3-yazilar{position:absolute;left:max(24px,calc((100% - 1132px) / 2));top:0;bottom:0;width:min(350px,32%);margin:0;padding:0;list-style:none;pointer-events:none}
.g3-yazilar li{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + 14px));opacity:0;
  transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.g3-yazilar li.on{opacity:1;transform:translateY(-50%)}
/* Her özelliğin kendi renk geçişi, logonun yeşiliyle uyumlu aile (yeşil, turkuaz, limon, altın, turuncu; mavi ve pembe yok, Erhan). */
.g3-yazilar h3{margin:0;font-size:clamp(26px,3.1vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.025em;
  background:linear-gradient(100deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 10px rgba(8,13,26,.55))}
.g3-yazilar li:nth-child(1) h3,.g3-menu li:nth-child(1),.g3-asagi[data-adim="1"]{--a:#8DF07A;--b:#22B84C}   /* İç Görünüm: taze yeşil */
.g3-yazilar li:nth-child(2) h3,.g3-menu li:nth-child(2),.g3-asagi[data-adim="2"]{--a:#62EBD6;--b:#0EA898}   /* Karşılaştır: turkuaz */
.g3-yazilar li:nth-child(3) h3,.g3-menu li:nth-child(3),.g3-asagi[data-adim="3"]{--a:#E2F45E;--b:#93C914}   /* Miyopi: limon */
.g3-yazilar li:nth-child(4) h3,.g3-menu li:nth-child(4),.g3-asagi[data-adim="4"]{--a:#5DF2A9;--b:#0DB26F}   /* Astigmat: zümrüt */
.g3-yazilar li:nth-child(5) h3,.g3-menu li:nth-child(5),.g3-asagi[data-adim="5"]{--a:#FFC766;--b:#FF8A00}   /* Kalınlık: düğmeyle aynı turuncu */
.g3-yazilar li:nth-child(6) h3,.g3-menu li:nth-child(6),.g3-asagi[data-adim="6"]{--a:#62EBD6;--b:#B7F06A}   /* Kaplamalar: turkuazdan limona */
.g3-yazilar li:nth-child(7) h3,.g3-menu li:nth-child(7),.g3-asagi[data-adim="7"]{--a:#FFDC5E;--b:#FF7A1A}   /* Renkli ve Güneş Cam: sıcak */
.g3-yazilar li:nth-child(8) h3,.g3-cam,.g3-menu li:nth-child(8),.g3-asagi[data-adim="8"]{--a:#FFE273;--b:#E7A900}   /* Dış Görünüm: altın */
.g3-yazilar li:nth-child(9) h3,.g3-menu li:nth-child(9),.g3-asagi[data-adim="9"]{--a:#C4F2A6;--b:#4FB82E}   /* PD ve Yükseklik: marka yeşili */
.g3-yazilar p{margin:12px 0 0;font-size:clamp(15px,1.45vw,18px);line-height:1.5;color:#C9D4E2}
/* Dış Görünüm: cam seçimi, göz bu iki cam arasında küçülüp büyür. */
.g3-cam{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;visibility:hidden}
.g3-yazilar li.on .g3-cam{visibility:visible;pointer-events:auto}
.g3-cam button{padding:9px 14px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  color:#EEF3F8;background:rgba(8,13,26,.58);border:1px solid rgba(255,255,255,.24);transition:background .25s,color .25s}
.g3-cam button.on{color:#0B1220;font-weight:700;background:linear-gradient(100deg,var(--a),var(--b));border-color:transparent}
.g3-cam button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.g3-atla{position:absolute;left:20px;bottom:18px;z-index:3;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  color:#fff;background:rgba(8,13,26,.62);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.g3-atla.on{opacity:1;visibility:visible}
.g3-atla:hover{background:rgba(8,13,26,.82)}
/* Aşağı kaydırın: sahne boyunca sabit, her ekranda. Dokununca bir sonraki adıma geçer.
   Girişte marka yeşili, adımlarda o adımın rengi (data-adim, betik yazar). */
html.g3-acik .g3-asagi[hidden]{display:inline-flex}
.g3-asagi{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:40;transform:translateX(-50%);align-items:center;gap:8px;
  padding:11px 15px 11px 20px;border-radius:999px;font-family:inherit;font-size:15px;font-weight:700;line-height:1;color:#fff;white-space:nowrap;cursor:pointer;
  background:linear-gradient(96deg,#4FAE3B,#2F8F3A);border:1px solid rgba(196,242,166,.7);
  --nabiz:rgba(143,212,106,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;animation:g3Nabiz 2.2s ease-out infinite}
.g3-asagi.on{opacity:1;visibility:visible}
.g3-asagi:hover{background:linear-gradient(96deg,#5CC045,#369B41)}
.g3-asagi[data-adim]{--nabiz:color-mix(in srgb,var(--b) 55%,transparent);color:#0B1220;background:linear-gradient(96deg,var(--a),var(--b));border-color:rgba(255,255,255,.6)}
.g3-asagi[data-adim]:hover{filter:brightness(1.08)}
.g3-asagi:focus-visible{outline:2px solid #fff;outline-offset:3px}
.g3-asagi svg{width:19px;height:19px;animation:g3Ipucu 1.3s ease-in-out infinite}
@keyframes g3Ipucu{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@keyframes g3Nabiz{0%{box-shadow:0 0 0 0 var(--nabiz)}70%,100%{box-shadow:0 0 0 12px transparent}}

/* Adım menüsü: üst çubuğun hemen altında, bulunulan özellik kendi renginde yanar. */
.g3-menu{position:absolute;left:0;right:0;top:calc(73px + 12px);z-index:3;display:flex;gap:6px;margin:0;padding:0 16px;list-style:none;overflow-x:auto;
  scrollbar-width:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.g3-menu::-webkit-scrollbar{display:none}
.g3-menu.on{opacity:1;visibility:visible}
.g3-menu li{flex:none}
.g3-menu li:first-child{margin-left:auto}
.g3-menu li:last-child{margin-right:auto}
.g3-menu button{padding:8px 13px;border-radius:999px;font-family:inherit;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  color:#EEF3F8;background:rgba(8,13,26,.58);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,color .25s}
.g3-menu button:hover{background:rgba(8,13,26,.8)}
.g3-menu button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.g3-menu li.on button{color:#0B1220;font-weight:700;background:linear-gradient(100deg,var(--a),var(--b));border-color:transparent}

/* Camın altındaki küçük etiketler (Basic · Ultra gibi). Yeri betikten: gözlükle birlikte kayar. */
.g3-etiket{position:absolute;left:0;top:0;z-index:2;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  color:#fff;background:rgba(8,13,26,.72);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s;pointer-events:none;will-change:transform}
.g3-etiket.on{opacity:1}
/* PD adımı: ölçüm sahnesi, gerçek ölçekte (betik pdCiz çizer). PD yeşil, yükseklik altın. */
.g3-pd,.g3-olcler{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s}
.g3-pd.on,.g3-olcler.on{opacity:1}
.g3-serit{fill:rgba(8,13,26,.72);stroke:rgba(255,255,255,.22);stroke-width:1}
.g3-ince{stroke:rgba(255,255,255,.62);stroke-width:1;fill:none}
.g3-kalin{stroke:#fff;stroke-width:1.5;fill:none}
.g3-sayi text{fill:#fff;font:600 10.5px Poppins,system-ui,sans-serif;text-anchor:middle}
.g3-cizgi{filter:drop-shadow(0 0 1.5px rgba(8,13,26,.8))}
.g3-cizgi line,.g3-cizgi path{fill:none;stroke-width:1.6;stroke-linecap:round}
.g3-yes,.g3-nisan path{stroke:#B6F08C}
.g3-sar{stroke:#FFD66B;stroke-width:2}
.g3-orta{stroke:#fff;stroke-width:1;stroke-dasharray:2 5;opacity:.8}
.g3-alt{stroke:#FFD66B;stroke-dasharray:7 5}
.g3-nokta{fill:#FFD66B;stroke:#0B1220;stroke-width:1}
.g3-nisan circle{fill:none;stroke:#B6F08C;stroke-width:1.6;vector-effect:non-scaling-stroke}
.g3-nisan path{stroke-width:1.6;vector-effect:non-scaling-stroke}
.g3-nisan .g3-merkez{fill:#B6F08C;stroke:none}
.g3-nisan .g3-halka{opacity:0;transform-box:fill-box;transform-origin:center}
.g3-pd.bitti .g3-halka{animation:g3Halka 2.4s ease-out infinite}
@keyframes g3Halka{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}}
.g3-olc{position:absolute;left:0;top:0;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;color:#fff;background:rgba(8,13,26,.82);border:1px solid rgba(182,240,140,.45);opacity:0;will-change:transform}
.g3-olc b{font-weight:700;color:#B6F08C}
.g3-toplam{padding:7px 14px;font-size:14px;font-weight:700;color:#0B1220;background:linear-gradient(100deg,#C4F2A6,#4FB82E);border-color:transparent}
.g3-toplam b{color:#0B1220;font-size:15px}
.g3-yuk-et{border-color:rgba(255,214,107,.5)}
.g3-yuk-et b{color:#FFD66B}
.g3-alt-et{padding:4px 10px;font-size:12px;color:#FFE6A3;border-color:rgba(255,214,107,.5)}
/* Sonuç kartı: yazının altında, ölçüldükçe dolar. */
.g3-olcum{width:100%;max-width:320px;margin-top:14px;border-collapse:separate;border-spacing:0;font-size:14px;color:#EEF3F8;background:rgba(8,13,26,.6);border:1px solid rgba(255,255,255,.16);border-radius:12px;overflow:hidden}
.g3-olcum th,.g3-olcum td{padding:7px 9px;text-align:center;font-weight:600}
.g3-olcum tr:first-child th{padding-top:9px;padding-bottom:3px;font-size:11.5px;letter-spacing:.03em;color:#9FB0C3;text-transform:uppercase}
.g3-olcum tr th:first-child{text-align:left;font-size:13px;color:#C9D4E2;text-transform:none;letter-spacing:0}
.g3-olcum td{font-size:16px;font-weight:700;color:#B6F08C;font-variant-numeric:tabular-nums}
.g3-olcum-y td{color:#FFD66B}
.g3-olcum td[data-k="top"]{color:#fff}

/* Eşik js/gozluk-3b.js ile aynı (oran < 1,1): dik tablet de üstte gözlük, altta yazı alır. */
@media (max-aspect-ratio:11/10){
  .g3-orti{background:linear-gradient(0deg,rgba(8,13,26,.9) 0%,rgba(8,13,26,.55) 32%,rgba(8,13,26,0) 50%)}
  .g3-orti::after{background:linear-gradient(0deg,rgba(8,13,26,.5) 0%,rgba(8,13,26,.42) 32%,rgba(8,13,26,0) 48%)}
  .g3-yazilar{left:18px;right:18px;width:auto;top:auto;bottom:74px;height:190px}
  .g3-yazilar li{top:auto;bottom:0;transform:translateY(14px)}
  .g3-yazilar li.on{transform:none}
  .g3-sahne{background:radial-gradient(90% 40% at 50% 22%,#22344C 0%,#0B1220 76%)}
  .g3-yuk{left:50%;top:22%}
  .g3-atla{left:12px;bottom:18px;padding:7px 12px}
  .g3-olc{padding:4px 8px;font-size:11.5px}
  .g3-toplam{padding:5px 11px;font-size:12.5px}
  .g3-toplam b{font-size:13.5px}
  .g3-alt-et{padding:3px 8px;font-size:10.5px}
  .g3-sayi text{font-size:8.5px}
  .g3-yazilar li:nth-child(9) p{display:none}
  .g3-olcum{max-width:none;margin-top:8px}
  .g3-olcum th,.g3-olcum td{padding:4px 8px}
  .g3-olcum tr:first-child th{padding-top:6px;padding-bottom:1px}
  .g3-olcum td{font-size:15px}
  html.g3-acik .hero{align-items:flex-end;padding:0 0 calc(72px + env(safe-area-inset-bottom))}
  html.g3-acik .hero .lead{margin-top:12px}
  html.g3-acik .hero-cta{margin-top:18px;gap:10px}
  html.g3-acik .hero .hero-note{margin-top:12px}
  html.g3-acik .hero .hero-stats{margin-top:14px;padding-top:12px}
  html.g3-acik .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(0deg,rgba(8,13,26,.95) 0%,rgba(8,13,26,.84) 48%,rgba(8,13,26,0) 74%)}
  html.g3-acik .hero-grid>div:first-child{max-width:none}
}
/* Yatay telefon: PD adımında kart sığsın. */
@media (max-height:520px){
  .g3-yazilar li:nth-child(9) p{display:none}
  .g3-olcum{margin-top:8px}
  .g3-olcum th,.g3-olcum td{padding:4px 8px}
  .g3-olcum td{font-size:14px}
}
/* Kısa ekranda ikincil bilgiler gider: başlık ve düğme ilk ekrana sığsın. */
@media (max-aspect-ratio:11/10) and (max-height:760px){
  html.g3-acik .hero .badge,html.g3-acik .hero .hero-stats{display:none}
}
/* Küçük telefon, tarayıcı çubukları açık: başlık, iki satır metin, düğmeler ve ipucu kalır. */
@media (max-aspect-ratio:11/10) and (max-height:640px){
  html.g3-acik .hero .hero-note{display:none}
  html.g3-acik .hero{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  html.g3-acik .hero-cta .btn{padding-top:11px;padding-bottom:11px}
}
@media (min-aspect-ratio:11/10) and (max-height:620px){
  html.g3-acik .hero .hero-note,html.g3-acik .hero .hero-stats{display:none}
  html.g3-acik .hero .lead{margin-top:10px}
  html.g3-acik .hero-cta{margin-top:18px}
}
@media (min-aspect-ratio:11/10) and (max-height:460px){
  html.g3-acik .hero .badge,html.g3-acik .hero .lead{display:none}
}