/* ==========================================================================
   astoryum.com sürümü
   - tarım sektörü ve masaüstüne özel düğmeler (görüntü/video/rapor) gizli
   - görünüm sitenin temasıyla aynı: koyu lacivert zemin, turuncu vurgu, Barlow
   - telefonda üstteki düğmeler "Ayarlar" menüsünde (web.js)
   ========================================================================== */

#sektor-sec button[data-sektor="tarim"], #goruntu, #video-dugme, #rapor-dugme { display: none !important; }
/* hız (sabit 1,75×), kalite ve sunum düğmeleri yok: sağ üstteki grup tamamen gizli */
.sag-dugmeler { display: none !important; }
/* uyarılar 2 sn sonra kaybolur (web.js) */
.sonuk { display: none !important; }
/* yükseklik cetveli ve anlık hareket yazısı ("Ana bom kalkıyor" vb.) yok */
.cetvel-sayi, .cetvel-etiket, #adim { display: none !important; }

/* sitenin yazı tipleri (aynı sunucudan; Türkçe harfler latin-ext dosyalarında) */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("/fonts/barlow-condensed-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+2000-206F; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }

:root {
  /* sitedeki steel-900/800/700/500/300 ve accent */
  --s900: hsl(217 55% 10%);
  --s800: hsl(217 45% 16%);
  --s700: hsl(217 30% 24%);
  --s500: hsl(215 14% 45%);
  --s300: hsl(215 16% 78%);
  --vurgu: hsl(22 95% 53%);
  --vurgu-koyu: hsl(22 95% 46%);
  --acik-metin: hsl(210 20% 96%);

  --lacivert: var(--s900);
  --metin: var(--acik-metin);
  --soluk: hsl(213 21% 72%);
  --cizgi: var(--s700);
  --zemin: var(--s900);
  --sari: var(--vurgu);
  --turuncu: var(--vurgu);
  --yesil: hsl(145 55% 50%);
  --amber: hsl(38 96% 56%);
  --kirmizi: hsl(0 84% 60%);
  --baslik: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
}

body { font: 15px/1.45 "Barlow", system-ui, sans-serif; background: var(--s900); color: var(--metin); }
button, input, select { font-family: "Barlow", system-ui, sans-serif; }

/* ------------------------------------------------------------ sol panel */
.panel { background: var(--s900); border-right: 1px solid var(--s700); }
.site-geri { display: inline-block; margin-bottom: 8px; font-size: 13px; color: var(--soluk); text-decoration: none; }
.site-geri:hover { color: var(--vurgu); }
.baslik { border-left-color: var(--vurgu); }
.marka { color: var(--vurgu); letter-spacing: .14em; }
.baslik h1 { color: #fff; }
.model-baslik:hover #model-ad-yazi { color: hsl(22 95% 70%); }
.model-baslik::after { background-color: var(--vurgu);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sektor-rozet { color: #fff; }

.kutu { background: var(--s800); border-color: var(--s700); border-radius: 6px; }
.kutu h2 { color: #fff; }
.alan > span:first-child { color: var(--metin); }
.giris { background: var(--s900); border-color: var(--s700); border-radius: 6px; }
.giris:focus-within { box-shadow: 0 0 0 3px hsl(22 95% 53% / .25); }
.giris input { color: #fff; }
.alan select { background: var(--s900); color: #fff; border-color: var(--s700); border-radius: 6px; }
.duvar-alanlari { border-left-color: var(--s700); }

.sonuc { background: hsl(145 45% 14%); border-color: hsl(145 40% 28%); border-radius: 6px; }
.sonuc[data-sinif="sinirda"] { background: hsl(38 60% 14%); border-color: hsl(38 60% 32%); }
.sonuc[data-sinif="asiyor"] { background: hsl(0 55% 16%); border-color: hsl(0 55% 34%); }
.sonuc[data-sinif="disarida"] { background: var(--s800); border-color: var(--s700); }
.sonuc[data-sinif="disarida"] .durum { color: var(--soluk); }
.cubuk { background: rgb(255 255 255 / .1); }
.uyari { color: hsl(38 96% 70%); }
.denge-not { background: hsl(38 60% 14%); color: var(--metin); }

button { background: var(--s800); color: var(--metin); border-color: var(--s700); border-radius: 6px; }
button:hover { border-color: var(--s500); }
.ana-dugme { background: var(--vurgu); border-color: var(--vurgu); color: #fff; box-shadow: 0 12px 32px -12px hsl(22 95% 50% / .55); }
.ana-dugme:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
.mod-sec { border-color: var(--s700); border-radius: 6px; }
.mod-sec button { background: var(--s800); }
.mod-sec button + button { border-left-color: var(--s700); }
.mod-sec button.secili { background: var(--vurgu); color: #fff; }

th { color: var(--soluk); border-bottom-color: var(--s700); }
td { border-bottom-color: hsl(217 30% 20%); }
tr.vurgu td { background: hsl(22 95% 53% / .16); color: #fff; }
.rozet { background: var(--vurgu); color: #fff; }
.not { color: var(--s500); }

/* elle kumanda */
.kumanda-kutu { background: var(--s800); border-color: var(--s700); }
.kol-yol { background: var(--s900); }
.kol-topuz { background: radial-gradient(circle at 35% 30%, hsl(30 100% 75%), var(--vurgu) 55%, hsl(22 95% 38%)); }
.kol.etkin .kol-yol { box-shadow: inset 0 2px 6px rgb(0 0 0 / .5), 0 0 0 2px hsl(22 95% 53% / .6); }
#elle-hassas { background: var(--s700); border-color: var(--s500); }
#elle-hassas[aria-pressed="true"] { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }
.acil { border-color: var(--vurgu); }
.kumanda-kutu .cubuk { background: var(--s900); }

/* ------------------------------------------------------------ sahne üstü düğmeler */
.kamera, .sag-dugmeler, .sahne-sec { background: hsl(217 55% 10% / .9); border-color: var(--s700); border-radius: 6px; box-shadow: 0 4px 20px -8px rgb(0 0 0 / .5); }
.kamera button, .sag-dugmeler button, .sahne-sec button { background: transparent; color: var(--acik-metin); }
.kamera button + button, .sag-dugmeler button + button, .sahne-sec button + button { border-left-color: var(--s700); }
.kamera button.secili, .sahne-sec button.secili { background: var(--vurgu); color: #fff; }
.sahne-sec button:hover:not(.secili), .kamera button:hover:not(.secili), .sag-dugmeler button:hover { background: var(--s700); }
.sag-dugmeler button.acik { background: var(--s700); color: #fff; }
.sag-dugmeler button[aria-pressed="false"] { color: var(--soluk); background: transparent; }
.sektor-sec .sektor-ad { background: var(--s900); color: var(--vurgu); border-radius: 6px 0 0 6px; }
.sektor-sec button { background: hsl(217 45% 16% / .92); color: var(--acik-metin); }
.sektor-sec button + button { border-left-color: var(--s700); }
.sektor-sec button:last-child { border-radius: 0 6px 6px 0; }
.sektor-sec button.secili { background: var(--vurgu); color: #fff; }
.sektor-sec button:hover:not(.secili) { background: var(--s700); }

/* sahnedeki yazılar */
.yuk-etiket, .cetvel-etiket { background: var(--vurgu); color: #fff; }
.duvar-etiket { color: var(--s900); border-color: #d9dee5; }
.moment { background: var(--s800); color: var(--acik-metin); }
.adim, .elle-uyari { background: hsl(217 55% 10% / .92); }
.sunum-kart { background: hsl(217 55% 10% / .92); border-left-color: var(--vurgu); }
.sk-marka { color: var(--vurgu); }
.sk-ilerleme span.gecti { background: hsl(22 95% 53% / .5); }
.sk-ilerleme span.simdi { background: var(--vurgu); }
.sunum-kontrol { background: hsl(217 55% 10% / .88); }
.sunum-kontrol button { background: transparent; }
.sunum-site { color: #fff; background: hsl(217 55% 10% / .88); border-bottom-color: var(--vurgu); }

/* ------------------------------------------------------------ telefon: "Ayarlar" menüsü */
.ayar-dugme { display: none; }
@media (max-width: 900px) {
  .ayar-dugme { display: flex; align-items: center; gap: 6px; position: absolute; top: 10px; right: 10px; z-index: 4;
    padding: 9px 14px; border: 1px solid var(--s700); border-radius: 6px; background: hsl(217 55% 10% / .92); color: #fff;
    font-weight: 700; box-shadow: 0 4px 20px -8px rgb(0 0 0 / .5); }
  .ayar-dugme svg { width: 18px; height: 18px; }
  .ayar-dugme[aria-expanded="true"] { background: var(--vurgu); border-color: var(--vurgu); }
  body.sunum .ayar-dugme { display: none; }

  .ust-bar { display: none; }
  .ust-bar.acik { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 12px; top: 56px; left: 10px; right: 10px;
    max-height: calc(55vh - 66px); overflow-y: auto; padding: 12px; background: var(--s900); border: 1px solid var(--s700);
    border-radius: 8px; box-shadow: 0 20px 50px -20px rgb(0 0 0 / .7); pointer-events: auto; }
  .ust-bar.acik > * { display: flex; flex-wrap: wrap; flex-basis: auto; justify-content: flex-start; gap: 6px;
    background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .ust-bar.acik > [hidden] { display: none; }
  .ust-bar.acik .sahne-sec::before, .ust-bar.acik .kamera::before, .ust-bar.acik .sag-dugmeler::before,
  .ust-bar.acik .sektor-sec .sektor-ad {
    flex-basis: 100%; display: block; padding: 0; background: none; color: var(--vurgu); border-radius: 0;
    font: 800 12px/1.2 var(--baslik); letter-spacing: .12em; text-transform: uppercase; }
  .ust-bar.acik .sahne-sec::before { content: "Vinç türü"; }
  .ust-bar.acik .kamera::before { content: "Kamera"; }
  .ust-bar.acik .sag-dugmeler::before { content: "Görünüm"; }
  html[lang="en"] .ust-bar.acik .sahne-sec::before { content: "Crane type"; }
  html[lang="en"] .ust-bar.acik .kamera::before { content: "Camera"; }
  html[lang="en"] .ust-bar.acik .sag-dugmeler::before { content: "View"; }
  .ust-bar.acik button { flex: 1 1 auto; min-height: 42px; padding: 8px 10px; border: 1px solid var(--s700) !important;
    border-radius: 6px !important; box-shadow: none; background: var(--s800); color: var(--acik-metin); }
  .ust-bar.acik .sektor-sec button.secili, .ust-bar.acik .sahne-sec button.secili, .ust-bar.acik .kamera button.secili {
    background: var(--vurgu); color: #fff; border-color: var(--vurgu) !important; }
}

/* yatay telefon: panel solda, sahne sağda tam yükseklikte (alt alta dizilince sahne 200 px kalıyordu) */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  body { grid-template-columns: minmax(250px, 36vw) 1fr; grid-template-rows: 100vh; overflow: hidden; }
  .sahne { grid-row: 1; grid-column: 2; height: 100vh; }
  .panel { grid-row: 1; grid-column: 1; height: 100vh; border-right: 1px solid var(--s700); }
  .ust-bar.acik { max-height: calc(100vh - 66px); }
}

/* telefonda dokunma alanları parmağa göre */
@media (pointer: coarse) {
  .giris input { padding-top: 10px; padding-bottom: 10px; }
  .onay input, .onay.opsiyon input { width: 22px; height: 22px; }
  .onay { min-height: 40px; }
  .site-geri { padding: 8px 0; }
  .alan select { padding: 10px 8px; }
}

/* demo dosyası inerken sahnede "Yükleniyor…" (demo hazır olunca body.hazir) */
body:not(.hazir) .sahne::after { content: "Yükleniyor…"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--acik-metin, #dfe6f0); font: 800 20px/1.2 var(--baslik, sans-serif); letter-spacing: .12em; text-transform: uppercase;
  background: radial-gradient(circle at center, hsl(217 45% 14%), hsl(217 55% 8%)); z-index: 5; }
html[lang="en"] body:not(.hazir) .sahne::after { content: "Loading…"; }

/* 3B (WebGL) yoksa açıklama */
.webgl-not { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 24px; max-width: 520px;
  margin: auto; text-align: center; color: var(--acik-metin, #dfe6f0); line-height: 1.5; }
.webgl-not strong { display: block; font: 800 22px/1.2 var(--baslik, sans-serif); text-transform: uppercase; color: #fff; }
body.webgl-yok .ust-bar, body.webgl-yok .ayar-dugme, body.webgl-yok .dugmeler { display: none !important; }