/* SIXTH PATH // ui_yol.css :: YOL OLAYI ve YOL KENARI HABERİ (P3, 2026-10-04; js/sim/yolculuk.js)
   Obsidyen zemin, altın çerçeve ve köşeler (premium.css belirteçleri). Kart kipinde #rite kutusu parşömen giyiyor
   (ui_panel.css / sim.css body.kartli #rite .rt-box); yol sahnesi kutusu .yo-kutu sınıfıyla obsidyene döner ve sınıf
   sahne kapanınca söküler (varış ekranı ve ayinler aynı kutuyu kullanır).
   WebView katman bütçesi: sonsuz animasyon, will-change, filter, mask, blend yok. Tek seferlik giriş geçişi ve basılı
   tutma dolgusu (tut.js .tut-dolu, 600 ms) yeter. 360×640'ta tek ekrana sığar: sahne resmi kısa yükseklikte küçülür. */

html body #rite .rt-box.yo-kutu.yo-kutu {
  width: min(420px, 100%); padding: 0; overflow: hidden; color: #e9dfc6;
  background: var(--pr-panel-zemin, linear-gradient(180deg, #19140c 0%, #100d09 38%, #0b0907 100%));
  border: 1px solid rgba(214, 176, 90, .55); border-radius: 14px;
  box-shadow: var(--pr-cerceve-ic, inset 0 0 0 3px #0c0a07), var(--pr-panel-golge, 0 26px 70px rgba(0, 0, 0, .72));
  position: relative;
}
#rite .yo-kutu .yo { position: relative; padding: 14px 16px 14px; }
#rite .yo-kutu .yo::before { content: ''; position: absolute; inset: 6px; pointer-events: none;
  background: var(--pr-koseler) no-repeat; opacity: .8; }

/* sahne resmi: çağın bir yeri, köşesinde çağın plakası */
#rite .yo-kutu .yo-sahne { position: relative; height: clamp(84px, 19dvh, 150px); margin: -14px -16px 12px;
  border-bottom: 1px solid rgba(214, 176, 90, .45); overflow: hidden; background: #0b0907; }
#rite .yo-kutu .yo-sahne img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: .92; }
#rite .yo-kutu .yo-sahne::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 9, 7, 0) 45%, rgba(11, 9, 7, .85)); }
#rite .yo-kutu .yo-plaka { display: block; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: #15100a center / cover no-repeat;
  box-shadow: 0 0 0 1px #0c0a07, 0 0 0 2.5px #c9a452, 0 0 0 3.5px #5c4418, 0 4px 10px rgba(0, 0, 0, .6); }
#rite .yo-kutu .yo-sahne .yo-plaka { position: absolute; z-index: 1; right: 12px; bottom: 10px; width: 40px; height: 40px; }

/* üst satır: YOLDA · yer   ·   perde */
#rite .yo-kutu .yo-ust { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px;
  font: 600 10px/1.3 var(--pr-display, serif); letter-spacing: .16em; color: #c9a452; text-transform: uppercase; }
#rite .yo-kutu .yo-ust span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rite .yo-kutu .yo-ust span:last-child { flex: none; color: #8f7a52; text-align: right; white-space: nowrap; }
#rite .yo-kutu .yo-baslik { margin: 0 0 6px; font: 700 18px/1.15 var(--pr-display, serif); letter-spacing: .06em;
  color: #f4dfa0; text-shadow: 0 1px 0 #000; text-transform: uppercase; }
#rite .yo-kutu .yo-metin { margin: 0 0 10px; font: 500 15.5px/1.38 var(--pr-metin, Georgia, serif); color: #e9dfc6; letter-spacing: 0; }
#rite .yo-kutu .yo-secilen { margin: 0 0 6px; font: italic 600 14px/1.3 var(--pr-metin, Georgia, serif); color: #c9a452; }
#rite .yo-kutu .yo-secilen::before { content: '✦ '; font-style: normal; }
#rite .yo-kutu .yo-iz { margin: 8px 0 0; font: italic 500 13px/1.3 var(--pr-metin, Georgia, serif); color: #a8946a; }
#rite .yo-kutu .yo-ipucu { margin: 8px 0 0; text-align: center; font: 500 11px/1.2 var(--pr-ui, sans-serif); letter-spacing: .08em; color: #8f7a52; }

/* şıklar: koyu levha, solda altın şerit; ad · hikâye sözü · rozetler; basılı tutarken altın çizgi soldan dolar */
#rite .yo-kutu .yo-siklar { display: grid; gap: 8px; }
#rite .yo-kutu .yo-sik { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; min-height: 54px; margin: 0; padding: 9px 12px 10px 15px; text-align: left; cursor: pointer;
  border: 1px solid rgba(214, 176, 90, .38); border-radius: 10px; overflow: hidden;
  background: linear-gradient(90deg, #c9a452 0 3px, transparent 3px), linear-gradient(180deg, #221a10 0%, #140f09 100%);
  box-shadow: 0 3px 0 #050403, inset 0 1px 0 rgba(255, 236, 190, .07); color: #f1e6cc;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#rite .yo-kutu .yo-sik:focus-visible { outline: 2px solid #f4dfa0; outline-offset: 2px; }
#rite .yo-kutu .yo-sik.tut-dolu { transform: translateY(2px); box-shadow: 0 1px 0 #050403; border-color: rgba(244, 223, 160, .8); }
#rite .yo-kutu .yo-sik > b { font: 600 15.5px/1.22 var(--pr-metin, Georgia, serif); color: #f7ecd2; letter-spacing: 0; text-transform: none; }
#rite .yo-kutu .yo-sik > em { font: italic 500 13.5px/1.25 var(--pr-metin, Georgia, serif); color: #cdb98d; }
#rite .yo-kutu .yo-dolgu { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #f4dfa0;
  transform: scaleX(0); transform-origin: left; text-decoration: none; }
#rite .yo-kutu .yo-sik.tut-dolu .yo-dolgu { transform: scaleX(1); transition: transform 600ms linear; }

/* rozetler: yalnız oyunun gerçek kaynakları, adıyla (sayı yalnız kasada) */
#rite .yo-kutu .yo-rozet { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
#rite .yo-kutu .yo-r { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 6px; border-radius: 999px;
  font: 600 10.5px/1.1 var(--pr-ui, sans-serif); font-style: normal; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid rgba(214, 176, 90, .35); background: rgba(214, 176, 90, .1); color: #e6cf98; }
#rite .yo-kutu .yo-r svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
#rite .yo-kutu .yo-r em { font-style: normal; font-size: 11px; }
#rite .yo-kutu .yo-r b { font-size: 9px; }
#rite .yo-kutu .yo-r.art { color: #8fe0a6; border-color: rgba(143, 224, 166, .35); background: rgba(143, 224, 166, .08); }
#rite .yo-kutu .yo-r.eks { color: #ff9a7c; border-color: rgba(255, 154, 124, .35); background: rgba(255, 154, 124, .08); }
#rite .yo-kutu .yo-r.kriz { color: #f4dfa0; border-color: rgba(244, 223, 160, .6); background: rgba(244, 223, 160, .12); }
#rite .yo-kutu .yo-r.soz { color: #d9c9a2; }
/* mühür taşı satırı (yolculuk.js tasSatiri, b1329): kartın taş penceresi satırıyla aynı dil — mücevher, Cinzel ad,
   Alegreya italik söz; sonuç ekranında kart arkası çipi gibi obsidyen hap, altın kenar */
#rite .yo-kutu .yo-tas { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: italic 500 12.5px/1.25 var(--pr-metin, Georgia, serif); color: #e9dfc6; }
#rite .yo-kutu .yo-tas-gem { display: block; flex: none; width: 18px; height: 18px; }
#rite .yo-kutu .yo-tas b { font: 700 10px/1.1 var(--pr-display, serif); font-style: normal; letter-spacing: .12em; color: #f0c56a; }
#rite .yo-kutu .yo-tas em { font-style: italic; }
#rite .yo-kutu .yo-tas-son { display: inline-flex; margin-top: 8px; padding: 3px 10px 3px 4px; border-radius: 999px;
  background: #121110; border: 1px solid #D2AC52; box-shadow: 0 2px 0 #6b4f1a; }

/* rejim bandı (#rejim z 640) perde açıkken gelmişse perdenin (#rite 620) altına iner: şıkkın üstünde dokunuş yutmasın
   (main.js rejimSonraki sıradaki bandı perde kapanana dek bekletir) */
body:has(#rite.open) #rejim { z-index: 610; }

/* düğmeler */
#rite .yo-kutu .yo-devam { display: flex; width: 100%; min-height: 48px; margin-top: 14px; justify-content: center; }
#rite .yo-kutu .yo-gec { display: flex; width: 100%; min-height: 44px; justify-content: center; margin: 0; }

/* yol kenarı haberi: kısa kart, başında çağın plakası */
#rite .yo-kutu .yo-haber .yo-h-bas { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
#rite .yo-kutu .yo-tur { display: block; font: 600 10px/1.2 var(--pr-display, serif); letter-spacing: .2em; color: #c9a452; text-transform: uppercase; }
#rite .yo-kutu .yo-haber .yo-baslik { margin: 2px 0 2px; font-size: 16.5px; }
#rite .yo-kutu .yo-kim { display: block; font: italic 500 13px/1.2 var(--pr-metin, Georgia, serif); color: #a8946a; }
#rite .yo-kutu .yo-kriz { margin: -4px 0 10px; padding: 6px 10px; border-left: 2px solid #c9a452; background: rgba(214, 176, 90, .08);
  font: 500 12.5px/1.3 var(--pr-ui, sans-serif); color: #e6cf98; }
#rite .yo-kutu .yo-kriz b { color: #f4dfa0; letter-spacing: .06em; }
#rite .yo-kutu .yo-denetim .yo-tur { color: #ff9a7c; }

/* çağ kapanışının YOLDA satırı (cag_kapi.js recapEk) */
#ck-tore .ck-s-yol { margin: 6px 0 0; font: italic 500 14px/1.3 var(--pr-metin, Georgia, serif); }
#ck-tore .ck-s-yol b { font: 600 10px/1 var(--pr-display, serif); font-style: normal; letter-spacing: .18em; margin-right: 6px; color: #8a6a24; }

@media (prefers-reduced-motion: no-preference) {
  #rite.open .rt-box.yo-kutu .yo { animation: yoGir .26s ease-out 1 backwards; }
}
@keyframes yoGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* kısa ekran (360×640): sahne resmi ve yazı biraz küçülür, tek ekrana sığar */
@media (max-height: 680px) {
  #rite .yo-kutu .yo-sahne { height: 76px; margin-bottom: 8px; }
  #rite .yo-kutu .yo { padding: 12px 14px 12px; }
  #rite .yo-kutu .yo-sahne { margin: -12px -14px 8px; }
  #rite .yo-kutu .yo-baslik { font-size: 16.5px; margin-bottom: 4px; }
  #rite .yo-kutu .yo-metin { font-size: 14.5px; line-height: 1.32; margin-bottom: 8px; }
  #rite .yo-kutu .yo-sik { min-height: 48px; padding: 7px 10px 8px 13px; }
  #rite .yo-kutu .yo-sik > b { font-size: 14.5px; }
  #rite .yo-kutu .yo-sik > em { font-size: 12.5px; }
  #rite .yo-kutu .yo-ipucu { margin-top: 6px; }
}