/* SARPOR marka katmanı — orijinal app.css'ten SONRA yüklenir.
   KAPSAM (15 Ekim 2026): yalnız marka (logo, renk, yazı tipi) ve metin. Biçim, hareket, görsel ve ses Orano'nun aynısı.
   Kaynak: SARPOR — Marka kimliği, SRP-MK-03 Rev B, Ekim 2026.
   Renk: siyah #000 · beyaz #FFF · nardo #6C6D70 · kaya #17181A · sis #C9CACC; amber #FFB000 yalnızca uyarıda.
   Yazı: Archivo (başlık 650, metin 400), başlık cümle düzeninde; Chivo Mono yalnızca veri (sıra no, saat, kod).
   Orano'nun 100 (Thin) istekleri 400'e, 900'ler 650'ye kenetlenir (font-face aralığı). */

/* Orano'nun "Blender Pro" adı Archivo değişken fontuna bağlı (Türkçe karakterler latin-ext'te) */
@font-face { font-family: "Blender Pro"; src: url(/experience/innovation/fonts/Archivo-var-latin.woff2) format("woff2"); font-weight: 400 650; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Blender Pro"; src: url(/experience/innovation/fonts/Archivo-var-latin-ext.woff2) format("woff2"); font-weight: 400 650; font-style: normal;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chivo Mono"; src: url(/experience/innovation/fonts/ChivoMono-Medium.ttf) format("truetype"); font-weight: 400 700; font-style: normal; }

:root { --siyah:#000; --beyaz:#fff; --nardo:#6c6d70; --kaya:#17181a; --sis:#c9cacc; --amber:#ffb000; }

html, body { background: var(--siyah); }
body { font-weight: 400; color: var(--sis); }

/* Başlıklar: Archivo 650, cümle düzeni, sıkı aralık */
.title[data-v-707e2a6c], .title[data-v-6f2b3d38], .link[data-v-31af6690], .intro .title[data-v-7bb85e5c],
.big-text .text[data-v-7bb85e5c], .key[data-v-7bb85e5c], .push .quote[data-v-7bb85e5c] {
  font-weight: 650; letter-spacing: -.02em; line-height: 1.05em; color: var(--beyaz);
}
.title[data-v-707e2a6c], .title[data-v-6f2b3d38] { font-size: 64px; }
@media (max-width:1599px) { .title[data-v-707e2a6c], .title[data-v-6f2b3d38] { font-size: 56px; } }
@media (max-width:1023px) { .title[data-v-707e2a6c], .title[data-v-6f2b3d38] { font-size: 44px; } }
@media (max-width:579px)  { .title[data-v-707e2a6c], .title[data-v-6f2b3d38] { font-size: 38px; } }

/* Veri yazısı: sıra ve sayfa numaraları */
.pagination .index[data-v-707e2a6c], .index[data-v-31af6690], .list-1 .index[data-v-7bb85e5c], .list-2 .item .item-index[data-v-7bb85e5c] {
  font-family: "Chivo Mono", monospace; font-weight: 500; letter-spacing: .04em;
}

/* Logo: başlıkta yazı logosu (imza, 7,78 : 1); alt bilgide yatay kilit */
.page-home .logo { width: 200px !important; height: 26px !important; }
.main-logo { width: 150px !important; height: 32px !important; background: url(/experience/innovation/images/sarpor-yatay-kilit.svg) no-repeat left center / contain; }
.main-logo img { visibility: hidden; }

/* Renk: düğmedeki renkli kumlanma gri */
.push-button .noise[data-v-5ee6af50] { filter: grayscale(1); }
/* Renk: Orano'nun gömülü PNG ikonları (bölüm düğmesi mavi #87A3F2; kural/push ikonları sarı #FFE600) beyaz */
.main-button.interaction .icon[data-v-7bb85e5c], .key .icon[data-v-7bb85e5c] { filter: brightness(0) invert(1); }
/* Bölüm 02 (duman) oyuna-git düğmesi: Orano'da bu bölüm yok → çizgisel alev ikonu */
.main-button.interaction .icon.icon-duman[data-v-7bb85e5c] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M17 4c-1 5-7 8-7 15a7 7 0 0 0 14 0c0-4-2-6-3-8-1 2-2 3-4 4 0-4 1-7 0-11z'/><path d='M14.5 22.5a2.5 3 0 0 0 5 0c0-1.5-1-2.5-2.5-4-1.5 1.5-2.5 2.5-2.5 4z'/></svg>"); }
/* "Ne görür?" oyunu: Orano'nun radyasyon ölçeği (20 / 10) bu oyunda anlamsız → gizli */
.left[data-v-33934aa3] { display: none !important; }
/* Renk: sonuç çizgisi beyaz (amber yalnız etkin uyarıdaki nesnede: uAlarm) */
.right .stroke[data-v-33934aa3] { background: var(--beyaz) !important; }
/* Bölüm 02 oyunu, mobil: telefon ekranındaki sahnenin altı açıklamaya binmesin (açıklama aşağıda, altında boş alan var) */
@media (max-width: 579px) { .interaction-tank .conclusion[data-v-4bfaabf0] { bottom: 30px !important; } }
/* Bölüm 02 girişi, 2. ipucu: Orano'nun sol-üst yerleşimi metni telefonun bildirim/saat bandına bindiriyordu → telefonun sağındaki boşluğa */
@media (min-width:1200px) {
  .keypoint.keypoint-tablet2 .stroke[data-v-1fddc543] { transform: rotate(0deg); width: 56px; }
  .keypoint.keypoint-tablet2 .text[data-v-1fddc543] { top: -12px; left: 112px; width: 190px; }
}
@media (min-width:1024px) and (max-width:1199px) {   /* dar masaüstü: metin telefonun altına (Orano'nun ≤1023 yerleşimi) */
  .keypoint.keypoint-tablet2 .stroke[data-v-1fddc543] { transform: rotate(130deg); width: 90px; }
  .keypoint.keypoint-tablet2 .text[data-v-1fddc543] { top: 120px; left: -160px; }
}

/* Bölüm 03 oyunu "Karar sizin": tuş paneli yerine olay kartı + üç karar düğmesi (Orano'nun .controls yerleşimi, 14vw sütun) */
.interaction-simulation .controls.karar[data-v-7ff2950b] { width: 16vw; bottom: 22%; white-space: normal; }
.interaction-simulation .controls.karar .inner[data-v-7ff2950b] { position: static; }
.interaction-simulation .controls.karar .olay[data-v-7ff2950b] { padding: 18px 20px 14px; margin-bottom: 14px; border: 1px solid rgba(255,255,255,.5); background: var(--kaya); }
.interaction-simulation .controls.karar .olay-saat[data-v-7ff2950b] { font-family: "Chivo Mono", monospace; font-size: 22px; letter-spacing: .04em; color: var(--beyaz); }
.interaction-simulation .controls.karar .olay-bolge[data-v-7ff2950b] { margin-top: 8px; font-size: 14px; color: var(--sis); }
.interaction-simulation .controls.karar .olay-sinif[data-v-7ff2950b] { display: inline-block; margin-top: 10px; padding: 2px 12px; border-radius: 12px; font-size: 13px; font-weight: 650; color: var(--siyah); background: var(--beyaz); }
.interaction-simulation .controls.karar .kararlar .button[data-v-7ff2950b] { display: block; width: 100%; margin: 0 0 8px; padding: 0 20px; text-align: left; cursor: pointer; }
.interaction-simulation .controls.karar .kararlar .button .label[data-v-7ff2950b] { font-size: 13px; opacity: .85; }
.interaction-simulation .controls.karar .kararlar .button:hover .background[data-v-7ff2950b] { opacity: .12; }
@media (max-width: 767px) {
  .interaction-simulation .controls.karar[data-v-7ff2950b] { width: auto; left: 15px; right: 15px; bottom: 95px; }
  .interaction-simulation .controls.karar .olay[data-v-7ff2950b] { padding: 12px 14px 10px; margin-bottom: 10px; }
  .interaction-simulation .controls.karar .olay-saat[data-v-7ff2950b] { font-size: 18px; }
  .interaction-simulation .controls.karar .kararlar[data-v-7ff2950b] { display: flex; gap: 6px; }
  .interaction-simulation .controls.karar .kararlar .button[data-v-7ff2950b] { margin: 0; padding: 0 8px; text-align: center; }
  .interaction-simulation .controls.karar .kararlar .button .label[data-v-7ff2950b] { font-size: 11px; }
}

/* Bölüm 02 (duman) girişi ipuçları: duman1 = direkteki kamera, duman2 = hareketli duman. Halka konumları sitenin kamerasıyla
   ölçüldü (tools/matris-cek.mjs + modeller/ekran_yansit.py): 1440 → kamera (1097,256), duman (756,259); 1280 → (937,187),
   (664,189); 390 → (272,108), (97,130). Etiketler boş alanlara: kamera etiketi dumanla kamera arasına (üstte), duman
   etiketi dumanın soluna (metin sütununun üstündeki boşluk). */
.keypoint.keypoint-duman1 .stroke[data-v-1fddc543] { transform: rotate(-151deg); width: 100px; }
.keypoint.keypoint-duman1 .text[data-v-1fddc543] { top: -56px; left: -212px; width: 150px; }
.keypoint.keypoint-duman2 .stroke[data-v-1fddc543] { transform: rotate(179deg); width: 120px; }
.keypoint.keypoint-duman2 .text[data-v-1fddc543] { top: 31px; left: -286px; width: 200px; }
@media (max-width:1299px) {
  .keypoint.keypoint-duman1 .stroke[data-v-1fddc543] { transform: rotate(-154deg); width: 85px; }
  .keypoint.keypoint-duman1 .text[data-v-1fddc543] { top: -42px; left: -187px; width: 140px; }
  .keypoint.keypoint-duman2 .stroke[data-v-1fddc543] { transform: rotate(178deg); width: 100px; }
  .keypoint.keypoint-duman2 .text[data-v-1fddc543] { top: 31px; left: -234px; width: 170px; }
}
/* Mobil (390 px): kamera etiketi başlık çubuğuyla kamera arasındaki boş şeride, duman etiketi dumanın altına (kabin sönük).
   Bölüm 04: telefon (128,280), figür (188,264), kamera (104,146). */
@media (max-width:1023px) {
  .keypoint.keypoint-duman1 .stroke[data-v-1fddc543] { transform: rotate(136deg); width: 80px; }
  .keypoint.keypoint-duman1 .text[data-v-1fddc543] { top: 112px; left: -120px; width: 150px; }
  .keypoint.keypoint-duman2 .stroke[data-v-1fddc543] { transform: rotate(81deg); width: 70px; }
  .keypoint.keypoint-duman2 .text[data-v-1fddc543] { top: 134px; left: -4px; width: 260px; }   /* -22'de ilk harf ekran dışı */
  .keypoint.keypoint-tablet1 .text[data-v-1fddc543] { width: 230px; }   /* uzun etiket 390/360'ta sağdan taşmasın */
  .keypoint.keypoint-simulator1 .stroke[data-v-1fddc543] { transform: rotate(60deg); width: 45px; }
  .keypoint.keypoint-simulator1 .text[data-v-1fddc543] { top: 70px; left: -20px; }
  .keypoint.keypoint-simulator2 .text[data-v-1fddc543] { top: 90px; left: -45px; }
  .keypoint.keypoint-simulator3 .stroke[data-v-1fddc543] { transform: rotate(70deg); width: 60px; }
  .keypoint.keypoint-simulator3 .text[data-v-1fddc543] { top: 100px; left: 0; }
}
/* Bölüm 01 rakam kutuları: "5 milyon TL" / "5 million TL" taralı kutudan taşmasın (iki dilde de taşıyordu) */
@media (min-width:1200px) { .push .key[data-v-7bb85e5c] { padding-left: 40px; padding-right: 40px; font-size: 56px; } }
@media (min-width:1024px) and (max-width:1199px) { .push .key[data-v-7bb85e5c] { padding-left: 30px; padding-right: 30px; font-size: 44px; } }
/* Bölüm 05 drone oyunu, telefon: sonuç metni açılan haritanın çizgileri üstünde okunsun */
@media (max-width:767px) { .interaction-droning .conclusion[data-v-0e01754a] { margin: 0 -12px; padding: 12px; background: rgba(0,0,0,.75); } }