/* noteland.net · korsan baskını sahnesi (DE-13). Bağımsız modül: baskin.js ile birlikte.
   Görseller Deniz'in kendi kodundan (araclar/baskin-uret: three.js + web/kaynak/malzeme) çizilmiş katmanlar; dünya karesi 2000×1600.
   Yalnız transform/opacity canlandırılır. Renkler ortak.css jetonları + palet.json'dan (HSV doygunluk ≤ 0,6). */

.baskin {
  position: relative;
  --baskin-boy: 420svh;                       /* kaydırma payı: sahne 100svh yapışık, 320svh boyunca anlatı */
  --baskin-duman: #BDB7AC;                    /* yapi.siva_golge */
  --baskin-toz: #8F877A;                      /* yapi.harabe */
  --baskin-toz-acik: #D3C8A9;                 /* kara.kum */
  --baskin-alev: #D5A95F;                     /* durum.isik_odul */
  --baskin-korsan: #8A4A3C;                   /* durum.korsan */
  --baskin-gulle: #3A3936;                    /* gemi.demir */
  --baskin-kopuk: #FBFAF7;                    /* kiyi_yazi.kopuk */
  --baskin-kiremit: #9C6B54;                  /* yapi.kiremit */
  --baskin-siva: #EEEAE2;                     /* yapi.siva */
  --baskin-tas: #A89F90;                      /* yapi.tas */
  --baskin-iz: #FBFAF7;                       /* gemi izi (köpük) */
  --baskin-karart: 0.12;
}
@media (prefers-color-scheme: dark) {
  .baskin {
    --baskin-duman: #6E767E;                  /* zemin.serit_ayirici (gece): koyu denizde parlamasın */
    --baskin-toz: #A2A7AB;                    /* yapi.siva (gece) */
    --baskin-toz-acik: #BABEC2;               /* metin.ikincil (gece) */
    --baskin-alev: #F2C47A;
    --baskin-korsan: #C07A68;
    --baskin-gulle: #1A1B1E;                  /* gemi.bayrak: gece gülle koyu çekirdek + sıcak hale */
    --baskin-kopuk: #BABEC2;
    --baskin-kiremit: #503C33;
    --baskin-siva: #A2A7AB;
    --baskin-tas: #5B5953;
    --baskin-iz: #465059;
    --baskin-karart: 0.22;
  }
}

/* ---------- sahne ve dünya ---------- */
.baskin--canli { height: var(--baskin-boy); }
.baskin__sahne {
  position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate;
  container-type: size;
  background: var(--kagit) var(--doku-deniz) repeat; background-size: 256px;
}
.baskin--canli .baskin__sahne { position: sticky; top: 0; }
/* dünya sahneyi kaplar (cover). Eylem kutusu (gemi tepesi → ev tabanı) ortadadır: telefon ortadaki ~740 birimi, masaüstü tamamını görür. */
.baskin__dunya {
  position: absolute; left: 50%; top: 50%; width: max(100%, 125svh); aspect-ratio: 2000 / 1600; translate: -50% -50%;
}
@supports (width: 1cqw) { .baskin__dunya { width: max(100cqw, 125cqh); } }
/* dar (dikey) sahne: eylem kutusunun ortası (gemi + ev, x ≈ 1060) ekranın ortasına gelsin, gemi başı kesilmesin */
@container (max-aspect-ratio: 3 / 4) { .baskin__dunya { translate: -53% -50%; } }
/* geniş (yatay) sahne: gemi üst şeridin altında kalsın diye dünya biraz aşağıda */
@container (min-aspect-ratio: 1 / 1) { .baskin__dunya { translate: -50% -45%; } }
.baskin__kamera, .baskin__yakinlas, .baskin__sarsinti { position: absolute; inset: 0; transform-origin: 53% 52%; }
/* isabette kamera eve yaklaşır: merkez evin gövdesi (katman.json ev_taban) */
.baskin__yakinlas { transform-origin: 48.1% 66.8%; }
.baskin--etkin .baskin__kamera, .baskin--etkin .baskin__yakinlas, .baskin--etkin .baskin__gemi { will-change: transform; }
/* sahne etkinken parçacıklar ve ev katmanları önceden katmana alınır: ilk göründükleri karede rasterleşip kare düşürmesinler */
.baskin--etkin .baskin-p, .baskin--etkin .baskin__ev, .baskin--etkin .baskin__isik { will-change: transform, opacity; }

.baskin__k { position: absolute; display: block; pointer-events: none; }
.baskin__k img { display: block; width: 100%; height: auto; color: transparent; }
/* yüklenmemiş (ya da yeniden denenen) resim görünmez: kırık resim simgesi hiç çıkmaz (baskin.js resimKoru) */
.baskin--canli img:not([data-hazir]) { visibility: hidden; }
/* katman kutuları: katman.json (uret.py isle) — dünya birimi / 2000 ya da / 1600 */
.baskin__zemin { left: 0; top: 0; width: 100%; }
.baskin__gemi { left: 42.375%; top: 18.906%; width: 25.35%; }
.baskin__gemi > div, .baskin__gemi > div > div, .baskin__gemi > div > div > div { position: relative; }
.baskin__ev { left: 41.025%; top: 58.6875%; width: 16.775%; }
.baskin__isik { left: 34.4%; top: 59.9375%; width: 23.25%; }
/* gemi suda: gövdenin su altı kısmı kâğıt denize karışır (durgun maske), su hattında köpük çizgisi, pruvada dalga, altta koyu su gölgesi.
   Bunlar salınım katmanının içinde: gemiyle birlikte yükselip alçalır. */
.baskin__gemi picture img { -webkit-mask-image: linear-gradient(to bottom, #000 0 87.5%, transparent 94%); mask-image: linear-gradient(to bottom, #000 0 87.5%, transparent 94%); }
.baskin__su-golge { position: absolute; left: 3%; top: 84%; width: 78%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--golge-murekkep) 16%, transparent), transparent); }
.baskin__kopuk { position: absolute; left: 1%; top: 85.5%; width: 80%; height: 5.5%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-kopuk) 92%, transparent) 0 46%, color-mix(in srgb, var(--baskin-kopuk) 40%, transparent) 70%, transparent); }
.baskin__pruva { position: absolute; left: 72%; top: 82.5%; width: 14%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-kopuk) 95%, transparent) 0 30%, color-mix(in srgb, var(--baskin-kopuk) 45%, transparent) 62%, transparent); }
/* gemi izi: kıçın gerisinde, su hattında uzun yumuşak köpük */
.baskin__iz {
  position: absolute; left: -46%; top: 84%; width: 56%; height: 7%; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-iz) 85%, transparent), transparent);
}
/* ödül ışığı (gündüz): evin önünde sıcak hale; gece pencere halesi .baskin__isik */
.baskin__parilti {
  position: absolute; left: 39.25%; top: 62.6%; width: 17.6%; aspect-ratio: 1.7; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--isik) 55%, transparent), transparent);
}
.baskin__isik { display: none; }
@media (prefers-color-scheme: dark) { .baskin__isik { display: block; } .baskin__parilti { display: none; } }
.baskin__karart { position: absolute; inset: -4%; background: var(--golge-murekkep); opacity: 0; pointer-events: none; }
.baskin__efekt { position: absolute; inset: 0; pointer-events: none; }

/* bölüm adı (Deniz bölüm etiketi dili: 600, beyaz hale, toprağın üstünde) */
.baskin__etiket {
  position: absolute; left: 48.05%; top: 71.9%; translate: -50% 0; margin: 0; white-space: nowrap; pointer-events: none;
  font: 600 clamp(13px, 1.05cqw, 15px) / 1.2 var(--yazi); letter-spacing: 0.01em; color: var(--metin);
  text-shadow: 0 0 2px var(--not), 0 0 2px var(--not), 0 0 4px var(--not);
}
.baskin__etiket:empty { display: none; }

/* sahne üstünde tek kısa evre etiketi (rakip analizi G2-3: sahne başına en çok bir kısa etiket); sabit üst şeridin altında */
.baskin__yuva { position: absolute; left: var(--kenar, 20px); right: var(--kenar, 20px); top: calc(max(12px, env(safe-area-inset-top)) + 72px); z-index: 2; display: flex; justify-content: flex-start; pointer-events: none; }
.baskin__durum { margin: 0; min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 999px;
  font: 600 var(--t-ikincil) / 1.2 var(--yazi); color: var(--metin); background: var(--panel); box-shadow: var(--golge-dugme);
  transition: opacity 200ms var(--e-standart); outline: none; }
.baskin__durum:empty { opacity: 0; }

/* ---------- parçacıklar (baskin.js üretir; ≈ 100, yalnız sahne etkinken katmanda) ---------- */
.baskin-p { position: absolute; aspect-ratio: 1; border-radius: 50%; opacity: 0; }
.baskin-p--namlu { background: radial-gradient(closest-side, color-mix(in srgb, var(--not) 70%, var(--baskin-alev)) 0 16%, var(--baskin-alev) 38%, color-mix(in srgb, var(--baskin-korsan) 65%, transparent) 62%, transparent); }
.baskin-p--ates-isik { aspect-ratio: 1.6; background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-alev) 55%, transparent), transparent); }
.baskin-p--duman { background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-duman) 92%, transparent), color-mix(in srgb, var(--baskin-duman) 55%, transparent) 55%, transparent); }
/* gülle: büyük koyu demir küre; sol üstte güneş parıltısı, sıcak ince hale (koyu gövde, yelken ve kara önünde de okunur) */
.baskin-p--gulle { background: radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--not) 38%, var(--baskin-gulle)) 0 6%, var(--baskin-gulle) 24% 45%, color-mix(in srgb, var(--golge-murekkep) 30%, transparent) 48%, transparent 56%); }
/* duman izi: gülle geçtikçe yerinde kalan, büyüyüp sönen küçük bulutlar (kavis okunur) */
.baskin-p--iz { background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-duman) 70%, var(--golge-murekkep)) 0 20%, color-mix(in srgb, var(--baskin-duman) 65%, transparent) 55%, transparent); }
@media (prefers-color-scheme: dark) {
  .baskin-p--gulle { background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--baskin-alev) 80%, transparent) 0 9%, var(--baskin-gulle) 20% 38%, var(--baskin-korsan) 44%, color-mix(in srgb, var(--baskin-alev) 45%, transparent) 52%, transparent 64%); }
}
.baskin-p--halka { background: radial-gradient(closest-side, transparent 52%, color-mix(in srgb, var(--baskin-kopuk) 85%, transparent) 64%, transparent 80%); }
.baskin-p--sicrama { border-radius: 46% 46% 50% 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-kopuk) 92%, transparent), transparent); }
.baskin-p--kum { background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-toz-acik) 90%, transparent), transparent); }
.baskin-p--isabet { background: radial-gradient(closest-side, #FFFDF8 0 26%, color-mix(in srgb, var(--baskin-alev) 90%, transparent) 50%, transparent); }
/* isabetten sonra sönen sıcak parıltı (≈1 s) */
.baskin-p--yansima { aspect-ratio: 1.7; background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-alev) 78%, transparent), color-mix(in srgb, var(--baskin-alev) 30%, transparent) 55%, transparent); }
/* kor: harabede titreşen sıcak ışık (kısık doygunluk: ışık ödülü + korsan tonu); alev biçimi çizilmez, ışık olarak okunur */
.baskin-p--alev { background: radial-gradient(closest-side, color-mix(in srgb, var(--not) 40%, var(--baskin-alev)) 0 10%, color-mix(in srgb, var(--baskin-alev) 80%, transparent) 30%, color-mix(in srgb, var(--baskin-korsan) 45%, transparent) 58%, transparent); }
/* onarım kutlaması: yalnız ışık (konfeti yok) */
.baskin-p--kutlama { aspect-ratio: 1.6; background: radial-gradient(closest-side, color-mix(in srgb, var(--isik) 60%, transparent), color-mix(in srgb, var(--isik) 22%, transparent) 55%, transparent); }
.baskin-p--toz { background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-toz) 85%, transparent), color-mix(in srgb, var(--baskin-toz) 45%, transparent) 55%, transparent); }
.baskin-p--toz.baskin-p--acik { background: radial-gradient(closest-side, color-mix(in srgb, var(--baskin-toz-acik) 88%, transparent), color-mix(in srgb, var(--baskin-toz-acik) 40%, transparent) 55%, transparent); }
.baskin-p--kul { aspect-ratio: 1.9; background: radial-gradient(closest-side, color-mix(in srgb, var(--golge-murekkep) 34%, transparent), color-mix(in srgb, var(--golge-murekkep) 16%, transparent) 60%, transparent); }
.baskin-p--enkaz { border-radius: 10%; aspect-ratio: 1.8; background: var(--baskin-siva); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--golge-murekkep) 18%, transparent); }
.baskin-p--enkaz.baskin-p--kiremit { background: var(--baskin-kiremit); }
.baskin-p--enkaz.baskin-p--tas { background: var(--baskin-tas); }

/* ---------- cam panel: "Tekrar" ---------- */
.baskin__panel {
  position: absolute; left: 50%; bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)); translate: -50% 0; z-index: 3;
  display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; max-width: calc(100% - 32px);
  border-radius: 28px; border: 1px solid color-mix(in srgb, var(--ayirici) var(--cam-kenar-op), transparent);
  background: color-mix(in srgb, var(--panel) var(--cam-op), transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--golge-cam);
  opacity: 0; visibility: hidden;
}
.baskin__kart { margin: 0; font-size: var(--t-ikincil); line-height: 1.3; color: var(--metin-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.baskin__kart:empty { display: none; }
.baskin__panel:has(.baskin__kart:empty) { padding-left: 8px; }
.baskin__tekrar {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 24px; border: 0; border-radius: 22px; cursor: pointer;
  font: 600 var(--t-govde) / 1 var(--yazi); color: var(--ters); background: var(--koyu-zemin);
  transition: transform 120ms var(--e-standart);
}
.baskin__tekrar:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .baskin__tekrar:hover { background: color-mix(in srgb, var(--koyu-zemin) 86%, var(--kagit)); } }
.baskin__tekrar:focus-visible { outline: 2px solid var(--eylem); outline-offset: 3px; }

/* kısa kart: Tekrar'dan sonra panelin yerinde açılır (not kâğıdı dili, cam çerçeve); soru, sonra cevap */
.baskin__kartcik {
  position: absolute; left: 50%; bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)); translate: -50% 0; z-index: 3;
  width: min(420px, calc(100% - 32px)); padding: 18px 22px 20px; border-radius: 24px;
  background: var(--not); box-shadow: 0 0 0 9px color-mix(in srgb, var(--panel) var(--cam-op), transparent), 0 0 0 10px color-mix(in srgb, var(--ayirici) var(--cam-kenar-op), transparent), var(--golge-cam);
  opacity: 0; visibility: hidden;
}
.baskin__kartcik-ust { display: block; margin-bottom: 6px; font-size: var(--t-kucuk); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--kiyi-iz); }
.baskin__kartcik-soru { margin: 0; font-size: var(--t-govde); font-weight: 600; line-height: 1.35; color: var(--metin); text-wrap: balance; }
.baskin__kartcik-cevap { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; font-size: var(--t-ikincil); line-height: 1.35; color: var(--metin); background: var(--vurgu); }
@media (prefers-reduced-transparency: reduce) {
  .baskin__panel { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- durgun kareler: azaltılmış hareket ve JS'siz (GSAP sahnesi .baskin--gsap ile kendi değerlerini yazar) ---------- */
.baskin:not(.baskin--gsap) .baskin__gemi,
.baskin:not(.baskin--gsap) .baskin__ev,
.baskin:not(.baskin--gsap) .baskin__isik,
.baskin:not(.baskin--gsap) .baskin__parilti,
.baskin:not(.baskin--gsap) .baskin__karart,
.baskin:not(.baskin--gsap) .baskin__etiket,
.baskin:not(.baskin--gsap) .baskin__panel { transition: opacity 180ms var(--e-standart), visibility 180ms; }
.baskin:not(.baskin--gsap) .baskin__kartcik { display: none; }
.baskin:not(.baskin--gsap) .baskin__ev { opacity: 0; }
.baskin:not(.baskin--gsap) .baskin__ev--saglam { opacity: 1; }
/* önce: sakin ada, ev ışıklı, gemi yok */
.baskin[data-baskin-durum="once"] .baskin__gemi { opacity: 0; }
/* baskın: gemi kıyıda, pencereler söndü */
.baskin[data-baskin-durum="baskin"] .baskin__ev--saglam { opacity: 0; }
.baskin[data-baskin-durum="baskin"] .baskin__ev--sonuk { opacity: 1; }
.baskin[data-baskin-durum="baskin"] .baskin__isik { opacity: 0; }
/* yıkıldı: harabe, ada kararır, "Tekrar" belirir */
.baskin[data-baskin-durum="yikildi"] .baskin__ev--saglam, .baskin[data-baskin-durum="yikildi"] .baskin__isik { opacity: 0; }
.baskin[data-baskin-durum="yikildi"] .baskin__ev--y3 { opacity: 1; }
.baskin[data-baskin-durum="yikildi"] .baskin__karart { opacity: var(--baskin-karart); }
.baskin[data-baskin-durum="yikildi"] .baskin__etiket { opacity: 0.55; }
.baskin[data-baskin-durum="yikildi"] .baskin__panel { opacity: 1; visibility: visible; }
/* onarıldı: ev yerinde, ışıklar yandı, gemi gitti */
.baskin[data-baskin-durum="onarildi"] .baskin__gemi { opacity: 0; }
.baskin[data-baskin-durum="onarildi"] .baskin__parilti { opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .baskin__tekrar { transition: none; }
  .baskin__tekrar:active { transform: none; }
}

/* yalnız deneme.html: sahneye kaydırarak girip çıkmak için boşluk */
.baskin-deneme-bosluk { height: 70svh; }