/* =========================================================
   SAYFALAR.CSS — alt sayfalar (Linkler, Portföy, Deneyimler, Sertifikalar)
   temel.css'teki renk değişkenlerini kullanır (--gold, --wood, --accent ...)
   ========================================================= */
/* kompakt sayfa başlığı (deneyimler: altında tam ekran sahne var) */
.sayfa-bas.kompakt { padding: 22px 0 18px; }
.sayfa-bas.kompakt .yol-izi { margin-bottom: 8px; }
.sayfa-bas.kompakt .sayfa-baslik { font-size: clamp(26px, 3.6vw, 40px); }
.sayfa-bas.kompakt .sayfa-giris { font-size: 16px; margin-top: 6px; }

/* metin içinde düğme (ör. "güncel CV'yi görüntüle") */
.metin-dugme {
  font: inherit; color: var(--gold); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.metin-dugme:hover { color: #fff; }

.sp-giris {
  font-family: var(--font-okuma);
  font-size: 17px; line-height: 1.5;
  color: var(--text); opacity: .85;
  margin: -4px 0 22px;
}

/* ---------- ▶ imleçli sekme menüsü (NES menüsü) ---------- */
.sekmeler {
  position: relative;
  display: flex; flex-wrap: wrap;
  gap: 14px 30px;
  padding-left: 26px;
  margin: 0 0 28px;
}
.sekme { font-size: 9px !important; padding: 8px 12px !important; }
.sekme:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; }
.sekme-sayi {
  display: inline-block; margin-left: 6px; padding: 2px 5px;
  background: var(--wood-dark); color: var(--gold);
  font-size: 7px; line-height: 1;
}
.sekme.is-primary .sekme-sayi { background: rgba(0, 0, 0, .35); color: #fff; }
.sekme-imlec {
  position: absolute; left: 0; top: 0;
  color: var(--gold); font-size: 13px; line-height: 1;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .7);
  pointer-events: none;
  animation: imlecYanip 1s steps(1) infinite;
}
@keyframes imlecYanip { 50% { opacity: 0; } }

/* piksel ikonlar */
.px-ikon { display: block; image-rendering: pixelated; }

/* biniş kartı zemini: kartın çentik rengiyle eşleşen orijinal ton (bilete dokunulmadı) */
.bk-zemin { background: rgba(8, 4, 14, .84); }

/* =========================================================
   TÜM LİNKLER & İLETİŞİM
   ========================================================= */
.ln-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.ln-panel { margin: 0 !important; }

/* ---------- LCD (Game Boy ekranı) — yuvarlak köşe yok: piksel basamaklar ---------- */
.ln-lcd {
  background: #a7a9a0;
  padding: 12px 14px 14px;
  margin-bottom: 20px;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 24px), calc(100% - 6px) calc(100% - 24px), calc(100% - 6px) calc(100% - 18px), calc(100% - 12px) calc(100% - 18px), calc(100% - 12px) calc(100% - 12px), calc(100% - 18px) calc(100% - 12px), calc(100% - 18px) calc(100% - 6px), calc(100% - 24px) calc(100% - 6px), calc(100% - 24px) 100%, 4px 100%, 4px calc(100% - 4px), 0px calc(100% - 4px));
  /* alttaki koyu şerit = cihazın kalınlığı (eskiden dış gölgeydi; basamaklı kesim dışarıyı kırptığı için içeride) */
  box-shadow: inset 0 -6px 0 #3a2010, inset -3px -9px 0 rgba(0, 0, 0, .28), inset 3px 3px 0 rgba(255, 255, 255, .35);
}
.ln-lcd-cerceve {
  position: relative;
  background: #5b5d6b;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 18px), calc(100% - 6px) calc(100% - 18px), calc(100% - 6px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) calc(100% - 6px), calc(100% - 18px) calc(100% - 6px), calc(100% - 18px) 100%, 4px 100%, 4px calc(100% - 4px), 0px calc(100% - 4px));
  padding: 10px 12px 10px 44px;
}
.ln-lcd-pil {
  position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 8px; color: #c9cbd6; letter-spacing: 0;
}
.ln-lcd-pil i {
  width: 8px; height: 8px;
  background: #ff3b3b; box-shadow: inset -2px -2px 0 #a8202b, 0 0 0 2px rgba(255, 77, 77, .3);
  animation: ledNabiz 2.6s steps(1) infinite;
}
@keyframes ledNabiz { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.ln-lcd-ekran {
  position: relative; overflow: hidden;
  min-height: 62px;
  display: flex; align-items: center;
  padding: 10px 12px;
  background: #9bbc0f;
  color: #0f380f;
  box-shadow: inset 0 0 0 3px #8bac0f;
}
.ln-lcd-ekran::after { /* LCD piksel ızgarası */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(15, 56, 15, .05) 0 1px, transparent 1px 3px);
}
.ln-lcd-logo {
  position: absolute; left: 0; right: 0; top: 50%;
  margin-top: -8px;
  text-align: center; font-size: 16px; letter-spacing: 2px;
  color: #0f380f;
}
.ln-lcd-satir {
  position: relative; z-index: 1;
  font-size: 16px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.ln-lcd-yerel { color: #0f380f; }
.ln-lcd-domain { display: inline-block; color: #306230; } /* sığmazsa bölünmeden alt satıra geçer */
.ln-lcd-imlec { color: #0f380f; animation: imlecYanip .8s steps(1) infinite; }
.ln-lcd-marka {
  margin: 8px 0 0; font-size: 16px; color: #303f9f; letter-spacing: 0;
}
.ln-lcd-marka small { font-size: 8px; color: #4a4c58; letter-spacing: 1px; margin-left: 8px; }

/* ---------- domain grupları ---------- */
.ln-grup { margin-bottom: 18px; }
.ln-grup:last-child { margin-bottom: 0; }
.ln-grup-bas {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: rgba(139, 94, 60, .18);
  border-left: 4px solid var(--grup-renk, var(--gold));
}
.ln-kutu svg { display: block; }
/* e-posta karoları 16×16 piksel, tam 2 kat: başlıkta ve satırda aynı 32 px kutu (elle seçilen eski 12'lik ikon ortalanır) */
.ln-kutu, .ln-zarf { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; }
.ln-domain { flex: 1; min-width: 0; font-size: 9px; color: var(--grup-renk, var(--gold)); overflow-wrap: anywhere; }
.ln-sayi { font-size: 7px; line-height: 1; padding: 4px 6px; background: var(--wood-dark); color: var(--gold); }

.ln-adresler {
  list-style: none; margin: 4px 0 0 20px; padding: 0;
  border-left: 2px dashed rgba(192, 139, 92, .45);
}
.ln-adres { display: flex; align-items: center; }
.ln-adres::before {
  content: ''; flex: 0 0 12px;
  border-top: 2px dashed rgba(192, 139, 92, .45);
}
.ln-adres-link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px;
  color: var(--text) !important; text-decoration: none !important;
  font-size: 9px; line-height: 1.6;
  transition: background .15s, transform .15s;
}
.ln-adres-link:hover, .ln-adres-link:focus-visible {
  background: rgba(240, 192, 64, .1);
  transform: translateX(4px);
  outline: none;
}
.ln-adres-link:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.ln-zarf svg { transition: transform .2s; }
.ln-adres-link:hover .ln-zarf svg { transform: translateY(-2px); }
.ln-metin { min-width: 0; overflow-wrap: anywhere; }
.ln-yerel { color: #fff; }
.ln-at {
  display: inline-block; vertical-align: bottom;
  max-width: 0; overflow: hidden; white-space: nowrap;
  color: var(--accent); opacity: 0;
  transition: max-width .4s steps(12, end), opacity .15s;
}
.ln-adres-link:hover .ln-at, .ln-adres-link:focus-visible .ln-at { max-width: 24em; opacity: .9; }
.ln-kopya {
  flex: 0 0 auto;
  background: none; border: 0; padding: 8px;
  opacity: .55;
  transition: opacity .15s, transform .15s;
}
.ln-kopya:hover, .ln-kopya:focus-visible { opacity: 1; transform: translateY(-2px); }
.ln-kopya:focus-visible { outline: 2px dashed var(--gold); }
.ln-kopya.ok { opacity: 1; }
.ln-zarf-ucan { position: fixed; z-index: 9800; pointer-events: none; }


/* ---------- sosyal satırlar ---------- */
.ln-sosyal, .ln-bosluk { display: flex; flex-direction: column; gap: 12px; }
.ln-satir {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
  border: 3px solid rgba(192, 139, 92, .35);
  transition: transform .18s, border-color .18s, background .18s;
}
.ln-satir:hover, .ln-satir:focus-within {
  transform: translateX(6px);
  border-color: var(--renk, var(--gold));
  background: rgba(255, 255, 255, .06);
}
.ln-satir-ikon { flex: 0 0 40px; width: 40px; height: 40px; display: block; }
.ln-satir-ikon .nes-icon { margin: 4px !important; }
.ln-satir-ikon .px-ikon { margin: 4px; }
.ln-satir:hover .ln-satir-ikon { animation: ikonZipla .5s steps(4) 1; }
@keyframes ikonZipla { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 70% { transform: translateY(1px); } }
.ln-satir-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ln-satir-ad { font-size: 11px; color: var(--renk, var(--gold)); }
.ln-hesaplar { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ln-hesap {
  font-size: 9px; color: var(--text) !important; text-decoration: none !important;
  overflow-wrap: anywhere;
}
.ln-hesaplar .ln-hesap:not(.ln-hesap-tam) {
  padding: 5px 7px;
  background: rgba(0, 0, 0, .35);
  border: 2px solid rgba(255, 255, 255, .12);
  transition: border-color .15s, color .15s;
}
.ln-hesaplar .ln-hesap:not(.ln-hesap-tam):hover,
.ln-hesaplar .ln-hesap:not(.ln-hesap-tam):focus-visible { border-color: var(--renk); color: #fff !important; outline: none; }
.ln-hesap-tam::after { content: ''; position: absolute; inset: 0; }
.ln-hesap-tam:focus-visible { outline: none; }
.ln-satir:has(.ln-hesap-tam:focus-visible) { box-shadow: 0 0 0 3px var(--gold); }
.ln-satir-ok {
  color: var(--renk, var(--gold)); font-size: 10px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .15s, transform .15s;
}
.ln-satir:hover .ln-satir-ok { opacity: 1; transform: translateX(0); }

/* ---------- gizli alan: hiçbir iz bırakmaz ---------- */
.ln-bosluk {
  min-height: 70px;
  margin-top: 12px;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ln-bosluk.acik { min-height: 0; }
.ln-satir-gizli { overflow: hidden; }
.ln-kafes {
  position: absolute; inset: 0; z-index: 2;
  display: grid; overflow: hidden; pointer-events: none;
}
.ln-kafes i { display: block; background: #e8e8e8; }
.ln-kafes i:nth-child(3n) { background: #111; }
.ln-kafes i:nth-child(5n+1) { background: var(--gold); }

/* ---------- bildirim ---------- */
.ln-bildirim {
  position: fixed; left: 50%; bottom: 24px; z-index: 9900;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  font-size: 9px; line-height: 1.6; color: #111;
  background: var(--gold);
  border: 3px solid #111; box-shadow: 4px 4px 0 #111;
  transform: translate(-50%, calc(100% + 40px));
  visibility: hidden;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .3s;
  pointer-events: none;
  overflow-wrap: anywhere;
}
.ln-bildirim.acik { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }

@media (max-width: 860px) {
  .ln-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ln-lcd-cerceve { padding-left: 36px; }
  .ln-lcd-satir { font-size: 8px; }
  .ln-adresler { margin-left: 8px; }
  .ln-adres-link { font-size: 8px; gap: 8px; padding: 9px 4px; }
  .ln-satir { padding: 10px; gap: 10px; }
}

/* =========================================================
   TASARIM PORTFÖYÜM
   ========================================================= */
.pf-kartlar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 40px 34px;
  perspective: 1200px;
}
.pf-kart {
  flex: 0 1 calc(50% - 17px);
  max-width: 560px; min-width: 0;
  outline: none;
}
.pf-kart[hidden] { display: none; }
.pf-kart-ic {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
}
.pf-kart-kapak {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0d1422;
  border: 4px solid var(--wood);
  box-shadow: 6px 6px 0 #3a2010, 0 18px 34px rgba(0, 0, 0, .45);
  transition: border-color .2s, box-shadow .2s;
}
.pf-kart-kapak img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.pf-kart:hover .pf-kart-kapak, .pf-kart:focus-visible .pf-kart-kapak {
  border-color: var(--gold);
  box-shadow: 6px 6px 0 #6b4a12, 0 0 0 3px rgba(240, 192, 64, .25), 0 22px 40px rgba(0, 0, 0, .55);
}
.pf-kart:hover .pf-kart-kapak img, .pf-kart:focus-visible .pf-kart-kapak img { transform: scale(1.05); }
.pfs-tuval { position: absolute; left: 0; bottom: 0; pointer-events: none; image-rendering: pixelated; }
/* Euage sahnesi: sağ üstte öldürme akışı */
.pfs-akis { position: absolute; top: 6px; right: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.pfs-akis-oge { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 6px; font: 8px/8px var(--f-piksel); color: var(--krem); background: rgba(10, 12, 20, .78); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.pfs-akis-oge span { color: #e8503c; }
.pfs-sage { color: #3ec9a7; } .pfs-jett { color: #9fd3ff; }
.pf-kart-parilti { /* piksel parıltı tuvali (64x36), büyütülüp keskin gösterilir */
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; image-rendering: pixelated;
}
.pf-kart-basla {
  position: absolute; left: 50%; bottom: 14px;
  transform: translate(-50%, 8px);
  padding: 8px 12px;
  font-size: 9px; color: #111; background: var(--gold);
  border: 3px solid #111; box-shadow: 3px 3px 0 #111;
  opacity: 0; transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.pf-kart:hover .pf-kart-basla, .pf-kart:focus-visible .pf-kart-basla {
  opacity: 1; transform: translate(-50%, 0);
  animation: basYanip 1s steps(1) infinite .3s;
}
@keyframes basYanip { 50% { color: var(--gold); } }
.pf-kart-alt { padding: 16px 4px 0; text-align: center; }
.pf-kart-baslik { font-size: 15px; color: var(--gold); text-shadow: 3px 3px 0 rgba(0, 0, 0, .6); margin: 0 0 10px; line-height: 1.4; }
.pf-kart-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  font-size: 8px; color: var(--text); opacity: .8; margin: 0;
}
.pf-etiket { color: var(--accent); }
.pf-alt { text-align: center; margin: 46px 0 10px; }
.pf-alt .nes-btn { font-size: 9px !important; }

/* ---------- proje detayı ---------- */
.pf-detay {
  position: fixed; inset: 0; z-index: 9400;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(8, 12, 22, .9);
  padding: 30px 18px 60px;
}
.pf-detay[hidden] { display: none; }
.pf-detay-ic {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  background: var(--panel);
  border: 4px solid var(--wood);
  box-shadow: 8px 8px 0 #3a2010;
}
.pf-detay-kapat {
  position: absolute !important; top: 12px; right: 12px; z-index: 3;
  font-size: 14px !important; padding: 6px 12px !important;
}
.pf-detay-banner { width: 100%; aspect-ratio: 16 / 9; max-height: 62vh; overflow: hidden; background: #0d1422; border-bottom: 4px solid var(--wood); }
.pf-detay-banner img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pf-ucan-kapak {
  position: fixed; z-index: 9600; margin: 0;
  object-fit: cover; image-rendering: pixelated;
  pointer-events: none;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
}
.pf-detay-govde { padding: 26px clamp(16px, 4vw, 44px) 40px; }
.pf-detay-kat { font-size: 9px; color: var(--accent); margin: 0 0 10px; letter-spacing: 1px; }
.pf-detay-baslik { font-size: clamp(16px, 2.6vw, 26px); color: var(--gold); margin: 0 0 12px; line-height: 1.35; text-shadow: 3px 3px 0 rgba(0, 0, 0, .6); }
.pf-detay-meta { font-size: 8px; color: var(--text); opacity: .75; margin: 0 0 16px; }
.pf-detay-aciklama { font-family: var(--font-okuma); font-size: 18px; line-height: 1.5; max-width: 760px; margin: 0 0 18px; }
.pf-detay-linkler { margin-bottom: 26px; }
.pf-behance-btn { font-size: 9px !important; }

.pf-bolum + .pf-bolum { margin-top: 34px; }
.pf-bolum-bas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding-top: 22px; margin-bottom: 10px;
  border-top: 3px dashed rgba(192, 139, 92, .45);
}
.pf-bolum-bas h3 { font-size: 13px; color: var(--gold); margin: 0; line-height: 1.5; }
.pf-bolum-tarih { font-size: 8px; color: var(--accent); }
.pf-bolum-bas .pf-behance-btn { margin-left: auto; font-size: 8px !important; }
.pf-bolum-aciklama { font-family: var(--font-okuma); font-size: 17px; line-height: 1.5; margin: 0 0 16px; opacity: .9; }

.pf-masonry { column-count: 3; column-gap: 14px; }
.pf-gorsel {
  break-inside: avoid; margin: 0 0 14px;
  border: 3px solid var(--wood); background: #0d1422;
  cursor: zoom-in;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease, border-color .15s;
  min-height: 60px;
}
.pf-gorsel.yuklendi { opacity: 1; transform: none; min-height: 0; }
.pf-gorsel:hover, .pf-gorsel:focus-visible { border-color: var(--gold); outline: none; }
.pf-gorsel img { display: block; width: 100%; height: auto; }

/* =========================================================
   LIGHTBOX (portföy)
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 9700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 22, .94);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .2s steps(4), visibility 0s linear .2s;
}
.lightbox.open { opacity: 1; pointer-events: all; visibility: visible; transition-delay: 0s; }
.lb-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; max-width: 86vw; }
.lb-stage img { max-width: 86vw; max-height: 84vh; max-height: 84dvh; border: 4px solid var(--wood); box-shadow: 0 20px 60px rgba(0, 0, 0, .7); background: #0d1422; }
.lb-close { position: absolute !important; top: 16px; right: 16px; z-index: 2; font-size: 12px !important; padding: 5px 11px !important; }
.lb-nav { position: absolute !important; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 14px !important; padding: 12px 15px !important; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-counter { font-size: 8px; color: var(--accent); }
@media (max-width: 560px) {
  .lb-nav { font-size: 11px !important; padding: 9px 11px !important; top: auto; bottom: 18px; transform: none; }
  .lb-prev { left: 12px; } .lb-next { right: 12px; }
  .lb-stage { max-width: 96vw; }
  .lb-stage img { max-width: 96vw; max-height: 74dvh; }
}

@media (max-width: 900px) {
  .pf-masonry { column-count: 2; }
}
@media (max-width: 720px) {
  .pf-kart { flex-basis: 100%; }
  .pf-kartlar { gap: 34px; }
}
@media (max-width: 520px) {
  .pf-masonry { column-count: 1; }
  .pf-detay { padding: 12px 8px 40px; }
  .pf-detay-aciklama, .pf-bolum-aciklama { font-size: 16px; }
  .pf-bolum-bas .pf-behance-btn { margin-left: 0; }
}

/* =========================================================
   DENEYİMLERİM — UÇUŞ ROTASI
   ========================================================= */
.ucus {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(560px, calc(100svh - var(--ust-h) - 136px), 860px);
  border-top: 4px solid var(--wood-dark);
  border-bottom: 4px solid var(--wood-dark);
  -webkit-user-select: none; user-select: none;
}

/* ---- gökyüzü: piksel bantlı alacakaranlık ---- */
.ucus-gok {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(to bottom,
    #150c22 0 10%, #1a1028 10% 20%, #21143a 20% 30%, #2a1a4a 30% 40%, #362057 40% 49%,
    #472864 49% 58%, #5e3168 58% 66%, #7c3d6a 66% 73%, #9d4b66 73% 80%, #c05d5e 80% 86%,
    #de7a57 86% 92%, #ee9a58 92% 100%);
}
.ucus-gok::before { /* güneş parıltısı */
  content: ''; position: absolute; left: 22%; bottom: 0;
  width: 60vw; height: 45%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 196, 120, .38), transparent 65%);
}
.ucus-yildizlar { position: absolute; inset: 0 0 45% 0; }
.ucus-yildizlar i {
  position: absolute; display: block;
  background: #fff6d8; opacity: .85;
  animation: yildizYanip 3.2s steps(2) infinite;
}
@keyframes yildizYanip { 50% { opacity: .15; } }
.ucus-gunes {
  position: absolute; left: 22%; bottom: 8%;
  width: clamp(130px, 15vw, 230px); aspect-ratio: 1;
  transform: translate(-50%, 30%);
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffe08a 0%, #ffc15e 45%, #f08a4b 75%, #e05a4f 100%);
  -webkit-mask: linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88% 94%, #000 94%);
          mask: linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88% 94%, #000 94%);
}
.ucus-bulut {
  position: absolute; left: 0;
  image-rendering: pixelated; pointer-events: none;
  will-change: transform;
  animation: bulutAk linear infinite;
}
.ub1 { top: 13%; height: 68px; opacity: .3; animation-duration: 70s; animation-delay: -12s; }
.ub2 { top: 33%; height: 88px; opacity: .2; animation-duration: 96s; animation-delay: -60s; }
.ub3 { top: 57%; height: 54px; opacity: .26; animation-duration: 56s; animation-delay: -31s; }
.ub4 { top: 5%;  height: 48px; opacity: .16; animation-duration: 120s; animation-delay: -88s; }
@keyframes bulutAk { from { transform: translateX(100vw); } to { transform: translateX(-110%); } }
.ucus-daglar { position: absolute; left: 0; bottom: 0; width: 100%; height: 20%; }
.dag-uzak { fill: #3b2358; }
.dag-yakin { fill: #1f1233; }

/* ---- duman & rota ---- */
.ucus-duman {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
.ucus-svg {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  shape-rendering: crispEdges;
}
.bag { opacity: 0; fill: #ff5a4a; transition: fill .2s; }
.bag.acik { opacity: 1; }
.bag.vurgu { fill: var(--gold); }
.dugum { opacity: 0; }
.dugum.acik { opacity: 1; }
.dugum-nokta { fill: #ff4a3a; stroke: #3a0d0d; stroke-width: 2px; transition: fill .2s; }
.dugum-halka {
  fill: none; stroke: #ff6a5a; stroke-width: 2px; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.dugum.acik .dugum-halka { animation: dugumHalka 1.8s steps(6) infinite; }
.dugum.vurgu .dugum-nokta { fill: var(--gold); }
@keyframes dugumHalka { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---- durak kartları ---- */
.ucus-duraklar { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.dk-li {
  position: absolute; left: 0; top: 0;
  width: var(--dk-g, 214px);
  visibility: hidden; opacity: 0;
  pointer-events: auto;
}
.dk-li.acik { visibility: visible; opacity: 1; }
.dk {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; margin: 0; padding: 0 0 4px;
  text-align: left; cursor: pointer;
  font-family: var(--f-piksel); color: var(--text);
  background: rgba(15, 8, 25, .93);
  border: 3px solid var(--wood);
  box-shadow: 4px 4px 0 #3a2010, 0 12px 26px rgba(0, 0, 0, .45);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.dk:hover, .dk:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold); outline: none;
  box-shadow: 4px 8px 0 #6b4a12, 0 0 0 3px rgba(240, 192, 64, .3), 0 18px 32px rgba(0, 0, 0, .5);
}
.dk-logo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  height: 56px; padding: 6px 12px;
  background: var(--krem);
  border-bottom: 3px solid var(--wood);
}
.dk-logo img { display: block; max-width: 100%; max-height: 44px; object-fit: contain; }
.logo-yazi { display: none; }
.logo-yok .logo-yazi { display: block; color: #3a2010; font-size: 11px; line-height: 1.4; text-align: center; }
.dk-li.parla .dk-logo::after, .dk:hover .dk-logo::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: skewX(-20deg);
  animation: logoParla .8s ease-out 1 forwards;
}
@keyframes logoParla { to { left: 125%; } }
.dk-rol { display: block; padding: 10px 11px 5px; font-size: 9px; line-height: 1.6; color: var(--gold); }
.dk-tarih { display: block; padding: 0 11px 8px; font-size: 7px; line-height: 1.6; opacity: .85; }
.dk-aktif {
  position: absolute; top: -11px; right: -9px;
  padding: 4px 6px; font-size: 6px; line-height: 1;
  color: #fff; background: #1f9d4c;
  border: 2px solid #0b3d1c; box-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
  animation: aktifYanip 1.4s steps(1) infinite;
}
@keyframes aktifYanip { 50% { background: #2fd36b; } }

/* ---- uçak ---- */
.ucus-ucak {
  position: absolute; left: 0; top: 0; z-index: 5;
  transform-origin: 49.7% 51%;
  will-change: transform;
  pointer-events: none; visibility: hidden;
  filter: drop-shadow(0 10px 6px rgba(0, 0, 0, .35));
}
.ucus.basladi .ucus-ucak { visibility: visible; }
.ucus-ucak img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.ucus-pervane {
  position: absolute; left: 91.8%; top: 51.3%; margin: -11% 0 0 -1.7%;   /* kutu burnun ortasında (kap kare: % kenar boşlukları genişliğe göre) */
  width: 3.4%; height: 22%;
  border-radius: 50%;
  background: rgba(245, 225, 190, .5);
  animation: pervane .1s steps(2) infinite;
}
@keyframes pervane { 50% { transform: scaleY(.3); opacity: .35; } }

/* ---- gösterge & tekrar ---- */
.ucus-hud {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  font-size: 8px; color: #9bf3a8;
  background: rgba(8, 4, 14, .72);
  border: 2px solid rgba(155, 243, 168, .35);
  text-shadow: 0 0 6px rgba(155, 243, 168, .5);
  pointer-events: none;
}
.hud-yil b { display: inline-block; min-width: 4ch; font-weight: normal; color: #d6ffd9; }
.hud-yil.flas b { animation: hudFlas .25s steps(1) 4; }
@keyframes hudFlas { 50% { color: #fff; text-shadow: 0 0 10px #fff; } }
.ucus-tekrar {
  position: absolute !important; right: 14px; bottom: 14px; z-index: 6;
  font-size: 8px !important;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s, transform .3s, visibility 0s linear .3s;
}
.ucus-tekrar.gorunur { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---- uçuş kayıt defteri: piksel pilot logbook — kaydırdıkça kapağı sırttan sola (yataydan) açılır ---- */
.dn-alt { min-height: 0; padding-top: 6px; }
.dn-defter {
  --kd-deri: #1f2c58; --kd-deri-k: #0e1530; --kd-kagit: #f4ead2;
  --kd-cizgi: #b9cadb; --kd-kol: #dcaea0; --kd-murekkep: #22305a; --kd-baslik: #2e5b4b;
  position: relative; padding: 0 0 56px;
}
.kd-kitap { position: relative; max-width: 1180px; margin: 0 auto; }
.kd-acik {
  --kd-kirp: 0px;
  position: relative; display: grid; align-content: start;
  grid-template-columns: [tahta] 14px [sol] minmax(0, 2fr) minmax(0, 3fr) [oluk] 16px [sag] minmax(0, 2.3fr) minmax(0, 2.7fr) [son] 14px [tahta-son];
  padding: 18px 0 24px;
  background: var(--kd-deri);
  box-shadow: inset 0 0 0 2px var(--kd-deri-k), inset 0 4px 0 #2f4176, 8px 8px 0 rgba(0, 0, 0, .35);
  clip-path: inset(0 -12px -12px var(--kd-kirp));
}
/* sayfalar: krem kâğıt, sırta doğru basamaklı gölge, dış kenarda kâğıt destesi */
.kd-sayfa { position: absolute; top: 10px; bottom: 14px; background: var(--kd-kagit); pointer-events: none; }
.kd-sol {
  grid-column: sol / oluk; left: 0; right: -8px;
  box-shadow: inset -2px 0 0 #c9b88f, inset -6px 0 0 #dccca6, inset -10px 0 0 #e6d8b8, inset -14px 0 0 #ede1c4,
    -3px 3px 0 #c8b994, -6px 6px 0 #efe4ca, -9px 9px 0 #c8b994;
}
.kd-sag {
  grid-column: sag / son; left: -8px; right: 0;
  box-shadow: inset 2px 0 0 #c9b88f, inset 6px 0 0 #dccca6, inset 10px 0 0 #e6d8b8, inset 14px 0 0 #ede1c4,
    3px 3px 0 #c8b994, 6px 6px 0 #efe4ca, 9px 9px 0 #c8b994;
}
.kd-sirt { position: absolute; grid-column: oluk / sag; left: 0; right: 0; top: 10px; bottom: 14px; pointer-events: none; }
.kd-sirt::before { content: ''; position: absolute; top: 0; bottom: 0; left: 7px; width: 2px; background: #b3a27c; }
/* sol yaprak sırttan açılırken: yatay çizgiler sıkışmada değişmez, yazılar ve dikey sütun çizgisi yaprak oturunca belirir */
.kd-donuyor .dn-satir > span:nth-child(-n+2), .kd-donuyor .dn-satir > span:nth-child(-n+2) *,
.kd-donuyor .kd-ust-sol, .kd-donuyor .kd-alt-sol, .kd-donuyor .kd-alt-sol * { color: transparent !important; }
.kd-donuyor .dn-satir > span:nth-child(-n+2) > i { visibility: hidden; }
.kd-donuyor .dn-donem, .kd-donuyor .dn-bas > span:nth-child(1) { box-shadow: none; }
.kd-golge { position: absolute; grid-column: tahta / oluk; left: 0; right: -8px; top: 0; bottom: 0; z-index: 3; background: #3b2a12; opacity: 0; pointer-events: none; }

/* satırlar iki sayfaya yayılır: sol sayfa DÖNEM · KURUM, sağ sayfa ROL · DETAY */
.kd-acik > .dn-satir, .kd-acik > .kd-ust, .kd-acik > .kd-alt { position: relative; grid-column: sol / son; display: grid; grid-template-columns: subgrid; }
.dn-satir {
  width: auto; margin: 0; padding: 0;
  text-align: left; cursor: pointer;
  font: inherit; color: var(--kd-murekkep);
  background: none; border: 0; border-radius: 0;
}
.dn-satir > span { min-width: 0; height: 34px; padding: 8px 12px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-bottom: 2px solid var(--kd-cizgi); }
.dn-satir > .kd-oluk, .kd-ust > .kd-oluk, .kd-alt > .kd-oluk { padding: 0; border: 0; background: none !important; }
.dn-donem, .dn-rol { box-shadow: inset -2px 0 0 var(--kd-kol); }
.dn-donem { font-family: var(--f-govde); font-size: 15px; line-height: 1.3; color: #4a5a80; }
.dn-kurum { font-family: var(--f-govde); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--kd-murekkep); }
.dn-rol { font-family: var(--f-govde); font-size: 16px; line-height: 1.3; color: var(--kd-murekkep); }
.dn-detay { font-family: var(--f-govde); font-size: 14px; line-height: 1.3; color: #5d6782; }
.dn-ucak { display: inline-block; vertical-align: -2px; margin-right: 6px; font-style: normal; }
.dn-ucak .px-ikon { display: inline-block; }
.kd-damga {
  display: inline-block; margin-left: 4px; padding: 4px 4px 2px; vertical-align: 2px;
  font: 8px/1 var(--f-piksel); color: #c0392b; box-shadow: 0 0 0 2px #c0392b; opacity: .85;
}
.dn-satir[data-t]:hover > span, .dn-satir[data-t]:focus-visible > span { background: rgba(250, 214, 72, .42); }
.dn-satir:focus-visible { outline: none; }
.dn-satir[data-t]:focus-visible > span { background: rgba(250, 214, 72, .75); }
.dn-satir[data-t]:focus-visible .dn-kurum { text-decoration: underline; text-decoration-thickness: 2px; }
.kd-bos { cursor: default; }
/* sütun başlıkları: yeşil mürekkeple basılı */
.dn-bas { cursor: default; }
.dn-bas > span { height: auto; white-space: normal; padding: 8px 12px 6px; font: 8px/1.4 var(--f-piksel); color: var(--kd-baslik); background: #dfe8d4; border-bottom: 4px solid var(--kd-baslik); }
.dn-bas > span:nth-child(1), .dn-bas > span:nth-child(4) { box-shadow: inset -2px 0 0 var(--kd-baslik); }
.dn-bas small { display: block; margin-top: 4px; font: 12px/1 var(--f-govde); letter-spacing: 1px; color: #6c8a7c; }
.kd-ust > span { padding: 4px 12px 10px; font: 8px/1.5 var(--f-piksel); letter-spacing: 1px; color: #a39371; }
.kd-ust-sol { grid-column: 1 / 3; }
.kd-ust-sag { grid-column: 4 / 6; text-align: right; }
/* sayfa altı: toplamlar, onay, pilot imzası, sayfa numaraları */
.kd-alt > span { position: relative; padding: 10px 12px 30px; border-top: 6px double var(--kd-baslik); font: 8px/2 var(--f-piksel); color: var(--kd-baslik); }
.kd-alt b { font-weight: normal; color: #6c8a7c; }
.kd-alt-sol { grid-column: 1 / 3; }
.kd-alt-sag { grid-column: 4 / 6; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.kd-onay { font-family: var(--f-govde); font-size: 14px; line-height: 1.3; color: #5d6782; }
.kd-imza { display: inline-flex; align-items: flex-end; gap: 10px; }
.kd-imza .px-ikon { display: block; }
.kd-no { position: absolute; bottom: 8px; font: 8px/1 var(--f-piksel); font-style: normal; color: #b0a07c; }
.kd-alt-sol .kd-no { left: 46px; }
.kd-alt-sag .kd-no { right: 46px; }
/* sayfa çevirme: kâğıt köşesinin kıvrık ucu (piksel basamaklı üçgen) */
.kd-sayfa-dug {
  position: absolute; z-index: 3; bottom: 14px; width: 36px; height: 36px; padding: 0; border: 0; cursor: pointer;
  display: grid; color: var(--kd-murekkep); background: #e3d3ad;
  filter: drop-shadow(-2px -2px 0 rgba(59, 42, 18, .35));
}
.kd-sayfa-dug svg { display: block; align-self: end; }
.kd-ileri { right: 14px; justify-items: end; padding: 0 6px 6px 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 32px, 4px 32px, 4px 28px, 8px 28px, 8px 24px, 12px 24px, 12px 20px, 16px 20px, 16px 16px, 20px 16px, 20px 12px, 24px 12px, 24px 8px, 28px 8px, 28px 4px, 32px 4px, 32px 0); }
.kd-geri { left: 14px; justify-items: start; padding: 0 0 6px 6px;
  clip-path: polygon(0 0, 4px 0, 4px 4px, 8px 4px, 8px 8px, 12px 8px, 12px 12px, 16px 12px, 16px 16px, 20px 16px, 20px 20px, 24px 20px, 24px 24px, 28px 24px, 28px 28px, 32px 28px, 32px 32px, 100% 32px, 100% 100%, 0 100%); }
.kd-sayfa-dug:hover, .kd-sayfa-dug:focus-visible { background: var(--gold); outline: none; }
.kd-kitap:not(.acildi) .kd-sayfa-dug, .kd-cevriliyor .kd-sayfa-dug { visibility: hidden; }
/* çevrilen yaprak: boş çizgili kâğıt; dönerken kararır (yazılar yaprak oturunca görünür) */
.kd-yaprak {
  position: absolute; z-index: 3; top: 10px; bottom: 14px; width: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--kd-kagit) 0 32px, var(--kd-cizgi) 32px 34px), var(--kd-kagit);
  box-shadow: inset 0 0 0 2px #c9b88f;
}
.kd-yaprak::after { content: ''; position: absolute; inset: 0; background: #3b2a12; opacity: var(--golge, 0); }
.kd-cevriliyor .dn-satir[data-t] > span, .kd-cevriliyor .dn-satir[data-t] > span *, .kd-cevriliyor .kd-alt span, .kd-cevriliyor .kd-alt b,
.kd-cevriliyor .kd-alt i, .kd-cevriliyor .kd-ust span { color: transparent !important; }
.kd-cevriliyor .dn-satir[data-t] svg, .kd-cevriliyor .kd-alt svg, .kd-cevriliyor .kd-damga { visibility: hidden; }
/* kapak (tuval) ve kurdele */
.kd-kapak { position: absolute; top: 0; left: 0; z-index: 4; display: block; image-rendering: pixelated; cursor: pointer; filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .35)); }
.kd-kitap.acildi .kd-kapak { visibility: hidden; }
.kd-kurdele {
  position: absolute; z-index: 2; top: calc(100% - 8px); left: calc(50% + 40px);
  width: 12px; height: 46px; pointer-events: none;
  background: #b8322a; box-shadow: inset 4px 0 0 #d9493d, inset -2px 0 0 #8c2219;
  clip-path: polygon(0 0, 12px 0, 12px 46px, 8px 46px, 8px 40px, 4px 40px, 4px 46px, 0 46px);
}
/* tek sayfa (dar ekran ya da subgrid desteklemeyen tarayıcı): kapak sol kenardaki sırttan açılır */
.kd-tek .kd-acik { grid-template-columns: [tahta] 10px [sol sag] minmax(0, 1fr) [oluk son] 10px [tahta-son]; padding: 16px 0 22px; }
.kd-tek .kd-sol, .kd-tek .kd-sirt, .kd-tek .kd-golge, .kd-tek .kd-oluk, .kd-tek .dn-bas, .kd-tek .kd-ust-sag { display: none; }
.kd-tek .kd-sag { left: 0; box-shadow: inset 6px 0 0 var(--kd-kagit), inset 8px 0 0 #e3a596, 3px 3px 0 #c8b994, 6px 6px 0 #efe4ca, 9px 9px 0 #c8b994; }
.kd-tek .kd-acik > .dn-satir, .kd-tek .kd-acik > .kd-ust, .kd-tek .kd-acik > .kd-alt { grid-template-columns: minmax(0, 1fr) auto; }
.kd-tek .dn-satir[data-t] { grid-template-areas: "kurum donem" "rol rol"; align-content: center; height: 52px; gap: 2px 10px; padding: 0 10px 0 18px; border-bottom: 2px solid var(--kd-cizgi); }
.kd-tek .dn-satir > span { height: auto; padding: 0; border: 0; box-shadow: none; background: none !important; }
.kd-tek .dn-detay { display: none; }
.kd-tek .dn-kurum { grid-area: kurum; font-size: 16px; }
.kd-tek .dn-donem { grid-area: donem; font-size: 13px; text-align: right; }
.kd-tek .dn-rol { grid-area: rol; font-size: 15px; }

.kd-tek .dn-satir[data-t]:hover, .kd-tek .dn-satir[data-t]:focus-visible { background: rgba(250, 214, 72, .42); }
.kd-tek .kd-bos { display: block; height: 52px; border-bottom: 2px solid var(--kd-cizgi); }
.kd-tek .kd-bos > span { display: none; }
.kd-tek .kd-ust > span { grid-column: 1 / -1; padding-left: 18px; }
.kd-tek .kd-alt > span { padding: 8px 10px 26px 18px; }
.kd-tek .kd-alt-sol { grid-column: 1; }
.kd-tek .kd-alt-sag { grid-column: 2; padding-left: 0; }
.kd-tek .kd-onay, .kd-tek .kd-imza b, .kd-tek .kd-alt-sag .kd-no { display: none; }
.kd-tek .kd-geri { left: 10px; }
.kd-tek .kd-ileri { right: 10px; }
.kd-tek .kd-kurdele { left: 40px; }
/* sayfa çevirme daveti: sağ alt köşeyi aşağıdan gösteren, "tıklayan" piksel el + köşe yanıp söner (ilk çevirişte kalkar) */
.kd-davet-el {
  position: absolute; z-index: 2; top: calc(100% + 2px); right: 6px;
  display: none; align-items: flex-start; gap: 8px; cursor: pointer;
}
.kd-kitap.acildi .kd-davet-el { display: flex; }
.kd-kitap:has(.kd-ileri[hidden]) .kd-davet-el, .kd-cevriliyor .kd-davet-el { display: none; }
.kd-davet-el b {
  margin-top: 24px; padding: 4px 6px; font: 8px/1 var(--f-piksel); letter-spacing: 1px; color: var(--gold); white-space: nowrap;
  background: #1a1208; box-shadow: 0 0 0 2px var(--gold);
}
.kd-davet-el svg { display: block; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .45)); animation: kdElTik .9s steps(1) infinite; }
@keyframes kdElTik { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.kd-kitap.kd-davet.acildi .kd-ileri:not(:hover):not(:focus-visible) { animation: kdKose 1.8s steps(1) infinite; }
@keyframes kdKose { 0%, 55% { background: #e3d3ad; } 60%, 72% { background: var(--gold); } 78%, 100% { background: #e3d3ad; } }
.kd-tek .kd-davet-el { right: 11px; }
.kd-tek .kd-davet-el svg { width: 30px; height: 36px; }
.kd-tek .kd-davet-el b { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .kd-davet-el svg, .kd-kitap.kd-davet .kd-ileri { animation: none !important; }
}

.dn-egitim {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
  grid-template-areas: "ust ust ust" "sol kep sag" "alt alt alt";
  column-gap: 56px; row-gap: 44px; padding: 34px 0 10px;
}
/* piksel mezuniyet kepi: krem piksel hat + sert gölge; köşelerinden okullara kesikli altın çizgiler */
.eg-kep {
  grid-area: kep; position: relative; width: 240px; height: 160px;
  filter: drop-shadow(2px 0 0 #f3e9d8) drop-shadow(-2px 0 0 #f3e9d8) drop-shadow(0 2px 0 #f3e9d8) drop-shadow(0 -2px 0 #f3e9d8) drop-shadow(6px 6px 0 rgba(0, 0, 0, .45));
}
.eg-kep svg { display: block; }
.eg-kep::before, .eg-kep::after { content: ''; position: absolute; top: 58px; width: 52px; height: 4px; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 14px); }
.eg-kep::before { right: calc(100% + 6px); }
.eg-kep::after { left: calc(100% + 6px); }
.eg-cizgi-ust { position: absolute; left: 118px; bottom: calc(100% + 6px); width: 4px; height: 38px; background: repeating-linear-gradient(180deg, var(--gold) 0 8px, transparent 8px 14px); }
.eg-okul {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; max-width: 380px;
  padding: 14px 16px; color: var(--murekkep); background: #f6efe2;
  box-shadow: 0 0 0 3px var(--murekkep), 0 0 0 6px var(--wood), 8px 8px 0 6px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s steps(5) calc(var(--s, 0) * 120ms), transform .45s steps(4) calc(var(--s, 0) * 120ms);
}
.eg-okul.gorundu { opacity: 1; transform: none; }
.eg-ust { grid-area: ust; justify-self: center; max-width: 440px; }
.eg-sag { grid-area: sag; justify-self: start; }
.eg-sol { grid-area: sol; justify-self: end; }
.eg-alt { grid-area: alt; justify-self: center; max-width: 440px; }
.eg-logo { flex: 0 0 60px; height: 60px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2px var(--murekkep), inset -3px -3px 0 #e6dccb; }
.eg-logo img { display: block; max-width: 50px; max-height: 50px; object-fit: contain; }
.eg-yazi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eg-ad { font-family: var(--f-govde); font-weight: 700; font-size: 19px; line-height: 1.2; }
.eg-bolum { font-family: var(--f-govde); font-size: 15px; line-height: 1.3; color: #4a4139; overflow-wrap: anywhere; }
.eg-meta { font: 8px/1.7 var(--f-piksel); color: #8a5a2b; }
.eg-damga { position: absolute; top: -12px; right: -10px; padding: 4px 6px; font: 8px/8px var(--f-piksel); color: #fff; background: #1f8f4e; box-shadow: 0 0 0 2px var(--murekkep), 3px 3px 0 2px rgba(0, 0, 0, .3); }
.eg-damga.devam { color: var(--murekkep); background: var(--gold); }
@media (max-width: 899px) {
  .dn-egitim { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kep" "ust" "sag" "sol" "alt"; justify-items: center; row-gap: 26px; }
  .eg-kep::before, .eg-kep::after, .eg-cizgi-ust { display: none; }
  .eg-okul { justify-self: stretch; max-width: none; }
}

/* ---- biniş kartı ---- */
.bk-kart {
  position: relative;
  display: flex;
  width: min(780px, 100%);
  max-height: calc(100vh - 36px); overflow: auto;
  background: #f6eedf; color: #2a1a10;
  border: 4px solid #2a1a10;
  box-shadow: 8px 8px 0 #000;
}
.bk-ana { flex: 1; min-width: 0; }
.bk-ust {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 12px 64px 12px 16px;
  font-size: 9px; color: #fff; letter-spacing: 1px;
  background: #c83c3c; border-bottom: 4px solid #2a1a10;
}
.bk-govde { padding: 18px 20px 22px; }
.bk-logo { display: flex; align-items: center; height: 60px; margin-bottom: 12px; }
.bk-logo img { max-height: 60px; max-width: 240px; object-fit: contain; }
.bk-logo.logo-yok { display: none; }
.bk-baslik { font-size: clamp(13px, 2.2vw, 18px); line-height: 1.4; color: #2a1a10; margin: 0 0 16px; }
.bk-alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 0 0 16px; }
.bk-alanlar dt { font-size: 7px; color: #a0522d; letter-spacing: 1px; margin-bottom: 6px; }
.bk-alanlar dd { margin: 0; font-size: 9px; line-height: 1.6; }
.bk-aciklama { font-family: var(--font-okuma); font-size: 17px; line-height: 1.5; margin: 0 0 14px; }
.bk-diger { border-top: 3px dashed rgba(42, 26, 16, .35); padding-top: 12px; }
.bk-diger-bas { font-size: 7px; color: #a0522d; letter-spacing: 1px; margin: 0 0 10px; }
.bk-diger ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-diger li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 8px; line-height: 1.6; }
.bk-diger li b { font-weight: normal; }
.bk-diger li span { opacity: .7; }
.bk-kocan {
  position: relative; flex: 0 0 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
  padding: 58px 10px 18px; /* üstte kapat düğmesine yer */
  background: #efe3cc;
  border-left: 4px dashed #2a1a10;
}
/* yırtma çentikleri: kartın içinde kalan yarım daireler (taşıp kaydırma açmasın) */
.bk-kocan::before, .bk-kocan::after {
  content: ''; position: absolute; left: -15px;
  width: 26px; height: 13px;
  background: #120a1c;
}
.bk-kocan::before { top: 0; border-radius: 0 0 13px 13px; }
.bk-kocan::after { bottom: 0; border-radius: 13px 13px 0 0; }
.bk-kocan-es { font-size: 24px; color: #c83c3c; }
.bk-kocan-yil { font-size: 11px; }
.bk-barkod {
  width: 100%; height: 70px;
  background: repeating-linear-gradient(90deg, #2a1a10 0 2px, transparent 2px 4px, #2a1a10 4px 7px,
    transparent 7px 9px, #2a1a10 9px 10px, transparent 10px 13px);
}
.bk-kapat { position: absolute !important; top: 8px; right: 8px; z-index: 2; font-size: 12px !important; padding: 4px 10px !important; }

@media (max-width: 719px) {
  .ucus { height: max(var(--ucus-min, 640px), calc(100svh - 240px)); }
  .dk-logo { height: 42px; padding: 5px 8px; }
  .dk-logo img { max-height: 32px; }
  .logo-yok .logo-yazi { font-size: 8px; }
  .dk-rol { font-size: 7px; padding: 8px 8px 4px; }
  .dk-tarih { font-size: 6px; padding: 0 8px 6px; }
  .dk-aktif { font-size: 5px; top: -9px; right: -6px; }
  .ucus-hud { font-size: 7px; padding: 6px 8px; gap: 8px; }
  .ucus-gunes { left: 28%; }
}
@media (max-width: 600px) {
  .bk-kart { flex-direction: column; }
  .bk-kocan {
    flex: 0 0 auto; flex-direction: row;
    padding: 14px 18px;
    border-left: 0; border-top: 4px dashed #2a1a10;
  }
  .bk-kocan::before, .bk-kocan::after { top: -15px; bottom: auto; width: 13px; height: 26px; }
  .bk-kocan::before { left: 0; border-radius: 0 13px 13px 0; }
  .bk-kocan::after { left: auto; right: 0; border-radius: 13px 0 0 13px; }
  .bk-barkod { width: 110px; height: 40px; }
  .bk-alanlar { grid-template-columns: minmax(0, 1fr); }
}

/* ilgi alanı rozetleri: NES'in sabit 10.5em genişliği uzun kelimeleri taşırıyordu → içeriğe göre genişlesin */
.ilgi-wrap .ilgi-badge.nes-badge { display: inline-flex; width: auto; height: auto; }
.ilgi-wrap .ilgi-badge.nes-badge.is-splited span { position: static; width: auto; padding: 0 .9em; }
.ilgi-wrap .ilgi-badge.nes-badge.is-splited span.is-dark { padding: 0 .5em; }

/* =========================================================
   PROJELER — KARTUŞ & KONSOL
   ========================================================= */
.pj-sahne {
  display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px); align-items: start;
  padding-top: 46px; padding-bottom: 64px;
}
.pj-konsol-kap { position: sticky; top: calc(var(--ust-h) + 18px); }
.pj-klavye { white-space: nowrap; }
@media (hover: none) { .pj-klavye { display: none; } }

/* ---- konsol ---- */
.konsol { position: relative; padding-top: 50px; }
.konsol-yuva { position: absolute; top: 0; left: 50%; width: 64%; height: 70px; transform: translateX(-50%); }
.konsol-yuva-agiz {
  position: absolute; left: -8px; right: -8px; bottom: 0; height: 20px; z-index: 2;
  background: #2b2b33; box-shadow: 0 0 0 4px var(--murekkep), inset 0 6px 0 #15151b;
}
.konsol-takili {
  position: absolute; left: 7%; right: 7%; bottom: 8px; height: 62px; z-index: 1;
  background: #b9bcc6;
  box-shadow: 0 0 0 4px var(--murekkep), inset -4px 0 0 #8d909b, inset 4px 4px 0 #e4e7ee;
}
.konsol-takili:empty { display: none; }
.takili-etiket {
  position: absolute; left: 9%; right: 9%; top: 9px; height: 28px;
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  font-size: 8px; line-height: 1; color: #111; white-space: nowrap; overflow: hidden;
  background: var(--renk, var(--gold)); box-shadow: 0 0 0 3px var(--murekkep);
}
.takili-ikon { flex: 0 0 auto; }
/* gövde: yuvarlak köşe yerine piksel basamaklar; mürekkep çerçeve ve gölge sarmalayıcıdaki
   drop-shadow zinciriyle verilir (basamakları birebir izler, clip-path onları kırpmaz) */
.konsol-govde-kap { position: relative; z-index: 3; filter: drop-shadow(4px 0 0 var(--murekkep)) drop-shadow(-4px 0 0 var(--murekkep)) drop-shadow(0 4px 0 var(--murekkep)) drop-shadow(0 -4px 0 var(--murekkep)) drop-shadow(12px 12px 0 rgba(0, 0, 0, .4)); }
.konsol-govde {
  position: relative;
  padding: 18px 22px 18px;
  background: #e8e2d4;
  clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 40px), calc(100% - 8px) calc(100% - 40px), calc(100% - 8px) calc(100% - 32px), calc(100% - 16px) calc(100% - 32px), calc(100% - 16px) calc(100% - 24px), calc(100% - 24px) calc(100% - 24px), calc(100% - 24px) calc(100% - 16px), calc(100% - 32px) calc(100% - 16px), calc(100% - 32px) calc(100% - 8px), calc(100% - 40px) calc(100% - 8px), calc(100% - 40px) 100%, 6px 100%, 6px calc(100% - 6px), 0px calc(100% - 6px));
  box-shadow: inset -6px -6px 0 #c9c1ad, inset 6px 6px 0 #fffaf0;
}
.konsol-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 8px; color: #6b6458; letter-spacing: 0; }
.konsol-led { width: 8px; height: 8px; background: #5a1d1d; box-shadow: 0 0 0 2px var(--murekkep); transition: background .2s steps(2); }
.konsol-led.acik { background: #ff3b3b; box-shadow: 0 0 0 2px var(--murekkep), 0 0 0 4px rgba(255, 77, 77, .35); }
.konsol-marka { margin-left: auto; font-size: 16px; color: #2f3a8f; letter-spacing: 0; }
.konsol-marka small { font-size: 8px; color: #6b6458; letter-spacing: 0; margin-left: 6px; }
.konsol-ekran-kap { filter: drop-shadow(4px 0 0 var(--murekkep)) drop-shadow(-4px 0 0 var(--murekkep)) drop-shadow(0 4px 0 var(--murekkep)) drop-shadow(0 -4px 0 var(--murekkep)); }
.konsol-ekran-cerceve {
  padding: 18px 18px 22px; background: #4a4f5c;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 24px), calc(100% - 8px) calc(100% - 24px), calc(100% - 8px) calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) calc(100% - 8px), calc(100% - 24px) calc(100% - 8px), calc(100% - 24px) 100%, 4px 100%, 4px calc(100% - 4px), 0px calc(100% - 4px));
  box-shadow: inset 0 0 0 3px #3a3e49;
}
/* klasik yeşil Game Boy LCD'si: 4 ton (#0f380f · #306230 · #8bac0f · #9bbc0f) + nokta matris */
.konsol-ekran {
  --renk: #0f380f;
  --lcd-0: #0f380f; --lcd-1: #306230; --lcd-2: #8bac0f; --lcd-3: #9bbc0f;
  position: relative; height: 340px; overflow: hidden;
  background: var(--lcd-3);
  color: var(--lcd-0);
  box-shadow: inset 0 0 0 4px var(--lcd-2);
}
.konsol-ekran::after { /* LCD nokta matrisi */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, .08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(15, 56, 15, .06) 0 1px, transparent 1px 3px);
}
.ekran-bos { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 20px; }
.ekran-yanip { font-size: 16px; color: var(--lcd-0); animation: imlecYanip 1s steps(1) infinite; }
.ekran-kucuk { font-size: 8px; line-height: 2; color: var(--lcd-1); }
.ekran-acilis { height: 100%; display: grid; place-items: center; align-content: center; gap: 14px; }
.ekran-logo { font-size: 24px; color: var(--lcd-0); text-shadow: 3px 3px 0 var(--lcd-2); animation: logoIn .7s steps(8) both; }
.ekran-not { font-size: 16px; color: var(--lcd-1); animation: imlecYanip .3s steps(1) 3 .7s both; }
@keyframes logoIn { from { transform: translateY(-170px); } to { transform: translateY(0); } }
.ekran-proje { position: relative; z-index: 1; height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 12px; scrollbar-width: thin; }
.ekran-proje > * { flex-shrink: 0; }
.ekran-bas { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px dashed var(--lcd-1); }
.ekran-ikon { flex: 0 0 auto; animation: ikonZipla .5s steps(4) 1 .2s; }
/* oyun kapağı: logo 4 yeşil tonda, 40×40 piksel → 2 kat; satır satır çizilerek belirir */
.ekran-kapak {
  flex: 0 0 auto; display: grid; place-items: center; width: 84px; height: 84px;
  background: var(--lcd-3); box-shadow: 0 0 0 2px var(--lcd-0), 4px 4px 0 2px var(--lcd-1);
}
.ekran-kapak img, .ekran-kapak .px-ikon { display: block; image-rendering: pixelated; animation: lcdCiz .6s steps(10) both .15s; }
@keyframes lcdCiz { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ekran-ad { flex: 1; min-width: 0; font-family: var(--f-piksel); font-size: 16px; line-height: 1.4; color: var(--lcd-0); text-shadow: 2px 2px 0 var(--lcd-2); }
.ekran-durum { flex: 0 0 auto; font-size: 8px; padding: 4px 6px; background: var(--lcd-2); color: var(--lcd-0); box-shadow: 0 0 0 2px var(--lcd-1); }
.ekran-durum.acik { background: var(--lcd-0); color: var(--lcd-3); animation: lcdYanip 1.4s steps(1) infinite; }
@keyframes lcdYanip { 50% { background: var(--lcd-1); } }
.ekran-meta { font-size: 8px; line-height: 1.7; color: var(--lcd-1); }
.ekran-metin { font-family: var(--f-govde); font-size: 16px; line-height: 1.45; min-height: 4.4em; color: var(--lcd-0); }
.ekran-metin::after { content: '\258C'; color: var(--lcd-0); animation: imlecYanip .8s steps(1) infinite; }
.ekran-etiketler { display: flex; flex-wrap: wrap; gap: 6px; }
.ekran-etiket { font-size: 8px; line-height: 1; padding: 4px 6px; border: 2px solid var(--lcd-1); color: var(--lcd-1); }
.ekran-rozet { font-size: 8px; color: var(--lcd-0); }
.ekran-tuslar { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 8px; font-size: 8px; color: var(--lcd-1); }
.ekran-tuslar b { font-weight: normal; color: var(--lcd-3); background: var(--lcd-0); padding: 2px 4px; margin-right: 3px; }
.ekran-proje { scrollbar-color: var(--lcd-1) var(--lcd-2); }

.konsol-kontrol { display: flex; justify-content: space-between; align-items: center; padding: 24px 6px 4px; }
.dpad { position: relative; width: 96px; height: 96px; }
.dpad-dikey { position: absolute; left: 32px; top: 0; width: 32px; height: 96px; background: #2b2b33; box-shadow: 0 0 0 3px var(--murekkep), inset 3px 3px 0 #474753; }
.dpad-sol, .dpad-sag {
  position: absolute; top: 32px; width: 36px; height: 32px; padding: 0;
  background: #2b2b33; border: 0; cursor: pointer;
  box-shadow: 0 0 0 3px var(--murekkep), inset 3px 3px 0 #474753;
}
.dpad-sol { left: 0; } .dpad-sag { right: 0; }
.dpad-sol::after, .dpad-sag::after {
  content: ''; position: absolute; top: 50%; margin-top: -7px;
  width: 8px; height: 14px; background: #9aa0ad;
}
.dpad-sol::after { left: 10px; clip-path: polygon(6px 0, 8px 0, 8px 14px, 6px 14px, 6px 12px, 4px 12px, 4px 10px, 2px 10px, 2px 8px, 0 8px, 0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px); }
.dpad-sag::after { right: 10px; clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 8px 6px, 8px 8px, 6px 8px, 6px 10px, 4px 10px, 4px 12px, 2px 12px, 2px 14px, 0 14px); }
.dpad button:hover::after { filter: brightness(1.5); }
.dpad .basili { transform: translateY(2px); background: #3a3a45; }
.konsol-ab { display: flex; gap: 16px; margin-right: 6px; }
.ab-kap { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 8px; color: #6b6458; letter-spacing: 0; }
.ab-kap:first-child { margin-top: 24px; }
.ab-cerceve { display: block; filter: drop-shadow(4px 0 0 var(--murekkep)) drop-shadow(-4px 0 0 var(--murekkep)) drop-shadow(0 4px 0 var(--murekkep)) drop-shadow(0 -4px 0 var(--murekkep)) drop-shadow(4px 4px 0 rgba(0, 0, 0, .3)); }
.ab-tus {
  display: block; width: 48px; height: 48px; padding: 0;
  clip-path: polygon(16px 0, 32px 0, 32px 4px, 40px 4px, 40px 8px, 44px 8px, 44px 16px, 48px 16px, 48px 32px, 44px 32px, 44px 40px, 40px 40px, 40px 44px, 32px 44px, 32px 48px, 16px 48px, 16px 44px, 8px 44px, 8px 40px, 4px 40px, 4px 32px, 0 32px, 0 16px, 4px 16px, 4px 8px, 8px 8px, 8px 4px, 16px 4px);
  font-family: var(--f-piksel); font-size: 16px; color: #ffd1e1;
  background: #a0234a; border: 0; cursor: pointer;
  box-shadow: inset -4px -4px 0 #6d1630, inset 4px 4px 0 #d64b77;
  transition: transform .08s steps(2);
}
.ab-tus:hover { background: #b02a55; }
.ab-tus:active { transform: translateY(4px); box-shadow: inset 4px 4px 0 #6d1630; }
.ab-tus:focus-visible { outline: none; background: #c53562; }
.konsol-alt { display: flex; justify-content: flex-end; align-items: flex-end; gap: 18px; padding: 6px 12px 0 0; }
/* 8-bit ses düğmesi: hoparlörün yanında; kapalıyken dalgalar yerine çarpı */
.konsol-ses { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 5px 7px 4px; border: 0; cursor: pointer; font: 8px/8px var(--f-piksel); color: #5a5547; background: #d9d1bc; box-shadow: 0 0 0 2px #8f8775, inset -2px -2px 0 #bdb49e; }
.konsol-ses svg { display: block; }
.konsol-ses .ses-yok { display: none; }
.konsol-ses[aria-pressed="false"] .ses-dalga { display: none; }
.konsol-ses[aria-pressed="false"] .ses-yok { display: inline; }
.konsol-ses[aria-pressed="false"] { color: #9a917c; }
.konsol-ses:hover, .konsol-ses:focus-visible { outline: none; color: var(--murekkep); box-shadow: 0 0 0 2px var(--murekkep), inset -2px -2px 0 #bdb49e; }
/* ES·BOY ekran görüntüleri: 4 yeşil tonda, düzenli titreşimle pikselleştirilir; tıklayınca renkli asıl görsel açılır */
.ekran-galeri { display: flex; flex-direction: column; gap: 6px; }
.ekran-galeri-bas { display: flex; justify-content: space-between; font-size: 8px; color: var(--lcd-1); }
.ekran-galeri-kare { display: block; align-self: center; padding: 0; border: 0; cursor: zoom-in; background: var(--lcd-3); box-shadow: 0 0 0 2px var(--lcd-0), 4px 4px 0 2px var(--lcd-1); }
.ekran-galeri-kare img { display: block; image-rendering: pixelated; animation: lcdCiz .6s steps(10) both; }
.ekran-galeri-dug { display: flex; justify-content: center; gap: 10px; }
.ekran-galeri-dug button { padding: 3px 6px; border: 0; cursor: pointer; font: 8px/8px var(--f-piksel); color: var(--lcd-3); background: var(--lcd-0); }
.ekran-galeri-dug button:hover, .ekran-galeri-dug button:focus-visible { outline: none; background: var(--lcd-1); }
.konsol-hoparlor { display: flex; gap: 6px; align-items: flex-start; }
.konsol-hoparlor i { width: 6px; height: 36px; background: #c9c1ad; box-shadow: inset 2px 2px 0 #a39c89; }
.konsol-hoparlor i:nth-child(1) { margin-top: 24px; }
.konsol-hoparlor i:nth-child(2) { margin-top: 18px; }
.konsol-hoparlor i:nth-child(3) { margin-top: 12px; }
.konsol-hoparlor i:nth-child(4) { margin-top: 6px; }

/* ---- raf & kartuşlar ---- */
.pj-raf-kap { padding-top: 6px; }
.pj-ipucu { margin: 10px 0 0; font-family: var(--f-govde); font-size: 16px; line-height: 1.4; color: var(--soluk); }
.pj-ipucu::before { content: '\25B6'; margin-right: 8px; font-family: var(--f-piksel); font-size: 8px; vertical-align: 2px; color: var(--gold); }
.pj-raf {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 30px 24px;
}
.pj-yer { position: relative; min-height: 220px; }
.pj-yer.bos::before {
  content: 'BOŞ YUVA'; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: 8px; color: rgba(192, 139, 92, .7);
  border: 3px dashed rgba(192, 139, 92, .5);
}
.pj-yer.bos .kartus { visibility: hidden; }
/* kartuş: sağ üstte basamaklı kesik köşe; mürekkep çerçeve + gölge raftaki yuvadan (drop-shadow) gelir */
.pj-yer:not(.bos) { filter: drop-shadow(4px 0 0 var(--murekkep)) drop-shadow(-4px 0 0 var(--murekkep)) drop-shadow(0 4px 0 var(--murekkep)) drop-shadow(0 -4px 0 var(--murekkep)) drop-shadow(8px 8px 0 rgba(0, 0, 0, .35)); }
.pj-yer:not(.bos):has(.kartus:focus-visible) { filter: drop-shadow(4px 0 0 var(--gold)) drop-shadow(-4px 0 0 var(--gold)) drop-shadow(0 4px 0 var(--gold)) drop-shadow(0 -4px 0 var(--gold)) drop-shadow(8px 8px 0 rgba(0, 0, 0, .35)); }
.kartus-ucan-kap { filter: drop-shadow(4px 0 0 var(--murekkep)) drop-shadow(-4px 0 0 var(--murekkep)) drop-shadow(0 4px 0 var(--murekkep)) drop-shadow(0 -4px 0 var(--murekkep)) drop-shadow(8px 8px 0 rgba(0, 0, 0, .35)); }
.kartus {
  position: relative; display: flex; flex-direction: column;
  width: 100%; height: 220px; padding: 0;
  border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-piksel); color: #111;
  background: #b9bcc6;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 18px) 0, calc(100% - 18px) 6px, calc(100% - 12px) 6px, calc(100% - 12px) 12px, calc(100% - 6px) 12px, calc(100% - 6px) 18px, 100% 18px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0px calc(100% - 4px));
  box-shadow: inset -5px -5px 0 #8d909b, inset 5px 5px 0 #e4e7ee;
  transition: transform .15s steps(3);
}
.kartus:hover, .kartus:focus-visible { transform: translateY(-10px); outline: none; }
.kartus, .kartus img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.kartus-sirt { flex: 0 0 26px; margin: 12px 14px 0; background: repeating-linear-gradient(90deg, #a3a6b0 0 6px, #cdd0d8 6px 12px); box-shadow: inset 0 0 0 2px #8d909b; }
/* ---- kartuş etiketi: gerçek Game Boy etiketi gibi — üst şerit, temaya uygun piksel sahne + logo, isim plakası ---- */
.kartus-etiket {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  margin: 10px 14px 8px; padding: 0;
  background: #f3e9d8;
  box-shadow: 0 0 0 3px var(--murekkep), 0 0 0 6px var(--renk);
}
.ke-ust { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 6px; background: var(--murekkep); }
.ke-marka { font-size: 8px; line-height: 1; color: var(--gold); letter-spacing: 0; }
.ke-renk { width: 8px; height: 8px; background: var(--renk); box-shadow: 0 0 0 2px #f3e9d8; }
.ke-sahne { position: relative; flex: 1; min-height: 56px; display: grid; place-items: center; image-rendering: pixelated; box-shadow: inset 0 -3px 0 var(--murekkep); }
.ke-logo {
  display: grid; place-items: center; width: 52px; height: 52px;
  background: #f6efe2; box-shadow: 0 0 0 3px var(--murekkep), inset -3px -3px 0 #dccfb6, 4px 4px 0 3px rgba(0, 0, 0, .35);
}
.ke-logo img { display: block; max-width: 44px; max-height: 44px; object-fit: contain; }
.kartus:hover .ke-logo { animation: ikonZipla .5s steps(4) 1; }
.ke-ad { flex: 0 0 auto; padding: 6px 6px 2px; font-size: 8px; line-height: 1.5; color: var(--murekkep); }
.ke-alt { flex: 0 0 auto; padding: 0 6px 6px; font-size: 8px; line-height: 1.5; color: #6b5a48; }
.tema-kutuphane .ke-sahne { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='16'%20shape-rendering='crispEdges'%3E%3Crect%20width='24'%20height='16'%20fill='%233b2414'/%3E%3Crect%20x='0'%20y='2'%20width='3'%20height='12'%20fill='%23c0392b'/%3E%3Crect%20x='0'%20y='4'%20width='3'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='12'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='3'%20y='4'%20width='2'%20height='10'%20fill='%232f6fe0'/%3E%3Crect%20x='3'%20y='6'%20width='2'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='3'%20y='4'%20width='1'%20height='10'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='5'%20y='1'%20width='3'%20height='13'%20fill='%231f8f4e'/%3E%3Crect%20x='5'%20y='3'%20width='3'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='5'%20y='1'%20width='1'%20height='13'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='8'%20y='5'%20width='2'%20height='9'%20fill='%23f0c040'/%3E%3Crect%20x='8'%20y='7'%20width='2'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='8'%20y='5'%20width='1'%20height='9'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='10'%20y='2'%20width='3'%20height='12'%20fill='%237b3fbf'/%3E%3Crect%20x='10'%20y='4'%20width='3'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='10'%20y='2'%20width='1'%20height='12'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='13'%20y='3'%20width='2'%20height='11'%20fill='%230f7f86'/%3E%3Crect%20x='13'%20y='5'%20width='2'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='13'%20y='3'%20width='1'%20height='11'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='15'%20y='1'%20width='3'%20height='13'%20fill='%23e8985a'/%3E%3Crect%20x='15'%20y='3'%20width='3'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='15'%20y='1'%20width='1'%20height='13'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='18'%20y='4'%20width='2'%20height='10'%20fill='%23c2185b'/%3E%3Crect%20x='18'%20y='6'%20width='2'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='18'%20y='4'%20width='1'%20height='10'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='20'%20y='2'%20width='3'%20height='12'%20fill='%232f6fe0'/%3E%3Crect%20x='20'%20y='4'%20width='3'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='20'%20y='2'%20width='1'%20height='12'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='23'%20y='6'%20width='1'%20height='8'%20fill='%23f3e9d8'/%3E%3Crect%20x='23'%20y='8'%20width='1'%20height='1'%20fill='rgba%28255,255,255,.4%29'/%3E%3Crect%20x='23'%20y='6'%20width='1'%20height='8'%20fill='rgba%280,0,0,.25%29'/%3E%3Crect%20x='0'%20y='14'%20width='24'%20height='2'%20fill='%237a4a2a'/%3E%3Crect%20x='0'%20y='14'%20width='24'%20height='1'%20fill='%23a06a3a'/%3E%3C/svg%3E") 0 100% / 48px 32px repeat, #3b2414; }
.tema-dukkan .ke-sahne { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='10'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='4'%20height='8'%20fill='%23d64541'/%3E%3Crect%20x='4'%20y='0'%20width='4'%20height='8'%20fill='%23f6efe2'/%3E%3Crect%20x='1'%20y='8'%20width='2'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='5'%20y='8'%20width='2'%20height='1'%20fill='%23f6efe2'/%3E%3Crect%20x='0'%20y='8'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='4'%20y='8'%20width='1'%20height='1'%20fill='%23f6efe2'/%3E%3Crect%20x='0'%20y='0'%20width='8'%20height='1'%20fill='%239c2a2a'/%3E%3C/svg%3E") 0 0 / 16px 20px repeat-x, url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='8'%20shape-rendering='crispEdges'%3E%3Crect%20width='16'%20height='8'%20fill='%23f0d9a8'/%3E%3Crect%20x='0'%20y='3'%20width='16'%20height='1'%20fill='%23d8bd86'/%3E%3Crect%20x='0'%20y='7'%20width='16'%20height='1'%20fill='%23d8bd86'/%3E%3Crect%20x='0'%20y='0'%20width='1'%20height='3'%20fill='%23d8bd86'/%3E%3Crect%20x='8'%20y='4'%20width='1'%20height='3'%20fill='%23d8bd86'/%3E%3C/svg%3E") 0 0 / 32px 16px repeat, #f0d9a8; }
.tema-oyun .ke-sahne { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20shape-rendering='crispEdges'%3E%3Crect%20width='16'%20height='16'%20fill='%2316213d'/%3E%3Crect%20x='2'%20y='3'%20width='1'%20height='1'%20fill='%23f3e9d8'/%3E%3Crect%20x='11'%20y='1'%20width='1'%20height='1'%20fill='%23f0c040'/%3E%3Crect%20x='7'%20y='10'%20width='1'%20height='1'%20fill='%23f3e9d8'/%3E%3Crect%20x='13'%20y='12'%20width='1'%20height='1'%20fill='%238fd3ff'/%3E%3Crect%20x='4'%20y='13'%20width='1'%20height='1'%20fill='%23f0c040'/%3E%3Crect%20x='9'%20y='4'%20width='3'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='10'%20y='3'%20width='1'%20height='3'%20fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 32px 32px repeat, #16213d; }
.tema-sanat .ke-sahne { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20shape-rendering='crispEdges'%3E%3Crect%20width='24'%20height='24'%20fill='%23f6efe2'/%3E%3Crect%20x='3'%20y='4'%20width='3'%20height='3'%20fill='%23d64541'/%3E%3Crect%20x='6'%20y='5'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='2'%20y='7'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='14'%20y='2'%20width='2'%20height='2'%20fill='%232f6fe0'/%3E%3Crect%20x='16'%20y='3'%20width='1'%20height='1'%20fill='%232f6fe0'/%3E%3Crect%20x='8'%20y='14'%20width='3'%20height='2'%20fill='%23f0c040'/%3E%3Crect%20x='10'%20y='16'%20width='1'%20height='1'%20fill='%23f0c040'/%3E%3Crect%20x='18'%20y='16'%20width='3'%20height='3'%20fill='%231f8f4e'/%3E%3Crect%20x='17'%20y='19'%20width='1'%20height='1'%20fill='%231f8f4e'/%3E%3Crect%20x='2'%20y='19'%20width='2'%20height='2'%20fill='%237b3fbf'/%3E%3Crect%20x='20'%20y='8'%20width='2'%20height='2'%20fill='%23e8985a'/%3E%3Crect%20x='22'%20y='10'%20width='1'%20height='1'%20fill='%23e8985a'/%3E%3C/svg%3E") 0 0 / 48px 48px repeat, #f6efe2; }
.tema-espor .ke-sahne { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='16'%20shape-rendering='crispEdges'%3E%3Crect%20width='20'%20height='16'%20fill='%231b1530'/%3E%3Crect%20x='2'%20y='1'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='3'%20y='2'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='3'%20y='4'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='2'%20y='5'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='5'%20y='1'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='6'%20y='2'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='7'%20y='3'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='6'%20y='4'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='5'%20y='5'%20width='1'%20height='1'%20fill='%231f9d6b'/%3E%3Crect%20x='12'%20y='9'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='13'%20y='10'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='14'%20y='11'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='13'%20y='12'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='12'%20y='13'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='15'%20y='9'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='16'%20y='10'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='17'%20y='11'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='16'%20y='12'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='15'%20y='13'%20width='1'%20height='1'%20fill='%23d64541'/%3E%3Crect%20x='15'%20y='2'%20width='1'%20height='1'%20fill='%233a2f5c'/%3E%3Crect%20x='6'%20y='11'%20width='1'%20height='1'%20fill='%233a2f5c'/%3E%3Crect%20x='0'%20y='15'%20width='20'%20height='1'%20fill='%232a2148'/%3E%3C/svg%3E") 0 0 / 40px 32px repeat, #1b1530; }
/* sürükle-bırak */
.kartus { cursor: grab; }
.pj-yer.suruk-kaynak .kartus { visibility: hidden; }
.pj-yer.suruk-kaynak { filter: none; }
.pj-yer.suruk-kaynak::before {
  content: ''; position: absolute; inset: 0; border: 3px dashed rgba(192, 139, 92, .5);
}
.kartus-suruk-kap { position: fixed; z-index: 9300; left: 0; top: 0; pointer-events: none; cursor: grabbing; will-change: transform; filter: drop-shadow(4px 0 0 var(--murekkep)) drop-shadow(-4px 0 0 var(--murekkep)) drop-shadow(0 4px 0 var(--murekkep)) drop-shadow(0 -4px 0 var(--murekkep)) drop-shadow(10px 14px 0 rgba(0, 0, 0, .35)); }
body.kartus-suruklen, body.kartus-suruklen * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.konsol.birakilabilir .konsol-yuva-agiz { background: #3a3a12; box-shadow: 0 0 0 4px var(--gold), inset 0 6px 0 #15151b; }
.konsol.birakilabilir .konsol-yuva::after {
  content: '\25BC  TAK'; position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; bottom: 30px;
  padding: 4px 8px; font-size: 8px; color: var(--murekkep); background: var(--gold); box-shadow: 0 0 0 3px var(--murekkep);
  animation: imlecYanip .6s steps(1) infinite; white-space: nowrap; z-index: 4;
}
.kartus-dis { flex: 0 0 12px; display: flex; justify-content: space-around; margin: 0 24px 10px; }
.kartus-dis i { width: 8px; background: #d4b04a; box-shadow: inset 0 0 0 2px #8a6d1d; }
.kartus-ucan { pointer-events: none; }
.pj-not { margin-top: 26px; font-family: var(--f-govde); font-size: 15px; color: var(--soluk); }

.pj-ileri { background: var(--krem); color: var(--murekkep); border-top: 4px solid var(--wood-dark); padding: 56px 0; }
.pj-ileri .etiket { color: var(--wood-dark); margin-bottom: 12px; }
.pj-ileri .vurgu { color: var(--kirmizi); }
.pj-ileri-ic { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pj-ileri-dug { display: flex; flex-wrap: wrap; gap: 22px; }

@media (max-width: 900px) {
  .pj-sahne { grid-template-columns: minmax(0, 1fr); }
  .pj-konsol-kap { position: relative; top: 0; max-width: 470px; width: 100%; margin: 0 auto; scroll-margin-top: calc(var(--ust-h) + 10px); }
  .konsol { scroll-margin-top: calc(var(--ust-h) + 10px); }
}
@media (max-width: 520px) {
  .konsol-govde { padding: 14px 14px 14px; clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 32px), calc(100% - 8px) calc(100% - 32px), calc(100% - 8px) calc(100% - 24px), calc(100% - 16px) calc(100% - 24px), calc(100% - 16px) calc(100% - 16px), calc(100% - 24px) calc(100% - 16px), calc(100% - 24px) calc(100% - 8px), calc(100% - 32px) calc(100% - 8px), calc(100% - 32px) 100%, 6px 100%, 6px calc(100% - 6px), 0px calc(100% - 6px)); }
  .konsol-ekran-cerceve { padding: 12px 12px 16px; }
  .konsol-ekran { height: 320px; }
  .ekran-metin { font-size: 15px; }
  .pj-raf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .kartus { height: 228px; }
  .pj-yer { min-height: 228px; }
  .kartus-sirt { margin: 10px 12px 0; flex-basis: 20px; }
  .kartus-etiket { margin: 10px 10px 8px; }
  .ke-logo { width: 44px; height: 44px; }
  .ke-logo img { max-width: 36px; max-height: 36px; }
  .ke-sahne { min-height: 52px; }
}

/* =========================================================
   SERTİFİKALAR — BAŞARIM VİTRİNİ
   ========================================================= */
.sr-sahne { padding-top: 40px; padding-bottom: 28px; }
.sr-sahne-alt { padding-bottom: 64px; }
/* oda: duvarın önünde masa (üstünde saksı, kitaplar + model uçak, lamba, küre, kupa, kaktüs), iki yanında yer saksıları; süpürgelik + ahşap zemin uçtan uca */
.duvar-bant.duvar-oda { padding-bottom: 0; box-shadow: inset 0 4px 0 var(--murekkep); }
.duvar-bant.duvar-oda::after { display: none; }
.oda { position: relative; padding: 148px 0 36px; }   /* üst boşluk: masadaki en uzun eşya (128 px) son sıradaki etiketlere binmesin */
/* duvar saati = zaman çizelgesi (sertifikalar.js saatKur): duvarın sağ üst köşesinde çiviye asılı, kadranda yıllar.
   Çerçevelerin sağında yer varsa onların yanında (.kose, levha altında); yoksa çerçevelerin üstünde sağa yaslı şerit (levha solunda) */
.oda-saat { --o: 3; position: relative; z-index: 2; display: flex; flex-direction: row-reverse; align-items: center; gap: 18px; width: max-content; max-width: calc(100% - 32px); margin: 4px 24px -6px auto; }
.oda-saat.kose { position: absolute; top: 18px; right: 20px; flex-direction: column; gap: 0; margin: 0; }
.oda-saat[hidden] { display: none; }
.saat-asili { display: flex; flex-direction: column; align-items: center; flex: none; }
.saat-tel { display: block; margin-bottom: -6px; }
.saat-govde { position: relative; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .35)); }
.saat-tuval { display: block; width: calc(61px * var(--o)); height: calc(61px * var(--o)); image-rendering: pixelated; }
.saat-yillar { position: absolute; inset: 0; }
.saat-yil { position: absolute; left: calc(var(--x) * var(--o) * 1px); top: calc(var(--y) * var(--o) * 1px); width: calc(9px * var(--o)); height: calc(7px * var(--o)); padding: 0; border: 0; background: none; cursor: pointer; }
.saat-yil:focus-visible { outline: 2px dashed var(--gold); outline-offset: 2px; }
.saat-levha {
  min-width: 190px; max-width: min(300px, calc(100vw - 32px)); padding: 7px 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; background: #c9a347;
  box-shadow: inset 0 2px 0 #f2d47e, inset 0 -2px 0 #8a6a22, 0 0 0 2px var(--murekkep), 3px 3px 0 2px rgba(0, 0, 0, .3);
}
.saat-levha-yil { font: 16px/16px var(--f-piksel); color: #2a1a08; }
.saat-levha-liste { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; }
.saat-levha-oge { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border: 0; background: rgba(255, 244, 214, .35); font-family: var(--f-govde); font-weight: 700; font-size: 13px; line-height: 1.15; color: #2a1a08; text-align: left; cursor: pointer; }
.saat-levha-oge i { flex: 0 0 8px; width: 8px; height: 8px; background: var(--renk); box-shadow: 0 0 0 2px #2a1a08; }
.saat-levha-oge:hover, .saat-levha-oge:focus-visible { background: #f2d47e; outline: none; }
.saat-levha-oge:focus-visible { box-shadow: inset 0 0 0 2px #2a1a08; }
.saat-levha small { font-family: var(--f-govde); font-size: 12px; color: #5c4313; }
.oda-saat.kose .saat-levha { margin-top: 16px; width: var(--levha); min-width: 0; max-width: var(--levha); }
.oda-grup { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 48px; }
.oda-sprite { display: block; width: calc(var(--w) * 4px); height: calc(var(--h) * 4px); }
.oda-masa { position: relative; display: block; }
.oda-ustu { position: absolute; left: 32px; right: 32px; bottom: calc(100% - 8px); display: flex; align-items: flex-end; justify-content: space-between; }
.oda-supurgelik { position: absolute; left: 0; right: 0; bottom: 56px; height: 18px; background: #5c3a1e; box-shadow: inset 0 4px 0 #8b5e3c, inset 0 6px 0 #3d2614, inset 0 -2px 0 #3a2010; }
.oda-zemin {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='14'%20shape-rendering='crispEdges'%3E%3Crect%20width='32'%20height='14'%20fill='%236b4226'/%3E%3Crect%20y='0'%20width='32'%20height='1'%20fill='%238b5e3c'/%3E%3Crect%20y='6'%20width='32'%20height='1'%20fill='%234a2c16'/%3E%3Crect%20y='7'%20width='32'%20height='1'%20fill='%238b5e3c'/%3E%3Crect%20y='13'%20width='32'%20height='1'%20fill='%234a2c16'/%3E%3Crect%20x='9'%20y='0'%20width='1'%20height='6'%20fill='%234a2c16'/%3E%3Crect%20x='25'%20y='7'%20width='1'%20height='6'%20fill='%234a2c16'/%3E%3Crect%20x='17'%20y='2'%20width='3'%20height='1'%20fill='%2379502f'/%3E%3Crect%20x='3'%20y='10'%20width='4'%20height='1'%20fill='%2379502f'/%3E%3C/svg%3E") 0 0 / 64px 28px repeat, #6b4226;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .35);
}
@media (max-width: 1040px) { .oda-bitki { display: none; } }
@media (max-width: 640px) {
  .oda-sprite { width: calc(var(--w) * 2px); height: calc(var(--h) * 2px); }
  .oda-ustu { left: 14px; right: 14px; bottom: calc(100% - 4px); }
  .oda { padding: 76px 0 28px; }
  .oda-saat { gap: 12px; margin-right: 16px; }
  .saat-levha { min-width: 0; flex: 1 1 auto; }
  .oda-supurgelik { bottom: 40px; height: 12px; }
  .oda-zemin { height: 40px; }
}
.sr-ust { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.sr-xp {
  flex: 1 1 380px; max-width: 560px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px 16px;
  padding: 14px 16px; background: var(--gece-3);
  box-shadow: 0 0 0 4px var(--murekkep), 0 0 0 7px var(--wood), 8px 8px 0 7px rgba(0, 0, 0, .35);
}
.sr-xp-etiket { font-size: 9px; color: var(--gold); }
.sr-xp-sayi { font-size: 9px; }
.sr-xp-sayi b { font-weight: normal; color: var(--gold); }
.sr-xp-cubuk { grid-column: 1 / -1; height: 20px; padding: 3px; background: var(--murekkep); box-shadow: inset 0 0 0 2px var(--cizgi); }
.sr-xp-cubuk i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--yesil) 0 12px, #179544 12px 14px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3); }
.sr-ozet { display: flex; flex-wrap: wrap; gap: 10px; }
.sr-ozet-cip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 7px; background: rgba(255, 255, 255, .04); border: 2px solid rgba(255, 255, 255, .1); }
.sr-ozet-cip i { width: 10px; height: 10px; background: var(--renk); }
.sr-ozet-cip b { font-weight: normal; color: var(--renk); }

/* başarım duvarının stilleri ortak dosyada: css/duvar.css (anasayfa rafı da kullanıyor) */
.sr-arti { position: fixed; z-index: 9800; transform: translateX(-50%); font-family: var(--f-piksel); font-size: 13px; color: var(--yesil); text-shadow: 2px 2px 0 #062411; pointer-events: none; }

/* zaman çizelgesi */
.sr-zaman { margin-top: 56px; }
.sr-cizelge-kap { overflow-x: auto; padding: 6px 2px 12px; }
.sr-cizelge { position: relative; list-style: none; margin: 0; padding: 0 10px; display: flex; min-width: max-content; }
.sr-cizelge::before { content: ''; position: absolute; left: 0; right: 0; bottom: 36px; height: 4px; background: repeating-linear-gradient(90deg, var(--wood) 0 10px, transparent 10px 14px); }
.sr-cz-yil { position: relative; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sr-cz-ogeler { min-height: 120px; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 10px; }
.sr-cz-oge {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--gece-3); border: 0; cursor: pointer;
  box-shadow: 0 0 0 3px var(--renk), 4px 4px 0 3px rgba(0, 0, 0, .35);
  transition: transform .15s steps(3);
}
.sr-cz-oge:hover, .sr-cz-oge:focus-visible { transform: translateY(-5px); }
.sr-cz-nokta { position: relative; z-index: 1; width: 14px; height: 14px; background: #3a4256; box-shadow: 0 0 0 3px var(--murekkep); }
.sr-cz-yil.dolu .sr-cz-nokta { background: var(--gold); }
.sr-cz-etiket { font-size: 8px; color: var(--soluk); }
.sr-cz-yil.dolu .sr-cz-etiket { color: var(--gold); }

/* başarım kartı */
.sr-belge {
  --renk: var(--gold);
  --oct: polygon(30px 0, calc(100% - 30px) 0, calc(100% - 30px) 10px, calc(100% - 20px) 10px, calc(100% - 20px) 20px, calc(100% - 10px) 20px, calc(100% - 10px) 30px, 100% 30px, 100% calc(100% - 30px), calc(100% - 10px) calc(100% - 30px), calc(100% - 10px) calc(100% - 20px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) calc(100% - 10px), calc(100% - 30px) calc(100% - 10px), calc(100% - 30px) 100%, 30px 100%, 30px calc(100% - 10px), 20px calc(100% - 10px), 20px calc(100% - 20px), 10px calc(100% - 20px), 10px calc(100% - 30px), 0 calc(100% - 30px), 0 30px, 10px 30px, 10px 20px, 20px 20px, 20px 10px, 30px 10px);
  position: relative; width: min(560px, calc(100% - 28px)); max-height: calc(100dvh - 40px); overflow-y: auto;
  color: var(--murekkep); background: var(--krem);
  box-shadow: 0 0 0 4px var(--murekkep), 0 0 0 10px var(--renk), 0 0 0 14px var(--murekkep), 14px 14px 0 14px rgba(0, 0, 0, .4);
}
.srb-ust { display: flex; justify-content: space-between; gap: 10px; padding: 13px 60px 13px 16px; font-size: 8px; color: var(--krem); background: var(--murekkep); }
.srb-kapat { position: absolute !important; top: 6px; right: 6px; }
.srb-govde { position: relative; padding: 26px 24px 18px; text-align: center; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .025) 0 2px, transparent 2px 4px); }
.srb-madalya { display: inline-grid; place-items: center; width: 122px; height: 122px; margin-bottom: 14px; background: var(--renk); clip-path: var(--oct); }
.srb-madalya .px-ikon { filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .35)); }
.srb-baslik { font-family: var(--f-govde); font-weight: 700; font-size: 26px; line-height: 1.2; margin: 0 0 18px; }
.srb-alanlar { display: grid; gap: 10px; max-width: 400px; margin: 0 auto 16px; text-align: left; }
.srb-alanlar div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-bottom: 6px; border-bottom: 2px dashed rgba(31, 26, 23, .2); }
.srb-alanlar dt { flex: 0 0 auto; font-size: 7px; color: #a0522d; letter-spacing: 1px; }
.srb-alanlar dd { margin: 0; font-family: var(--f-govde); font-size: 16px; line-height: 1.3; text-align: right; }
.srb-gorsel { margin: 0 0 14px; }
.srb-gorsel img { max-width: 100%; max-height: 300px; box-shadow: 0 0 0 3px var(--murekkep); }
.srb-dug { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 6px; }
.srb-dug:empty { display: none; }
.srb-muhur {
  position: absolute; top: 18px; right: 18px;
  width: 66px; height: 66px; display: grid; place-items: center;
  font-family: var(--f-piksel); font-size: 12px; color: var(--kirmizi);
  border: 4px solid var(--kirmizi);
  box-shadow: inset 0 0 0 3px var(--krem), inset 0 0 0 5px var(--kirmizi);
  opacity: .85;
}
.srb-alt { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px 18px; border-top: 3px dashed rgba(31, 26, 23, .25); }
.srb-alt .pdug { box-shadow: 0 0 0 3px var(--murekkep), inset -3px -3px 0 0 var(--krem-2), 4px 4px 0 3px rgba(0, 0, 0, .25); }

@media (max-width: 560px) {
  .srb-muhur { width: 50px; height: 50px; font-size: 9px; top: 12px; right: 12px; }
  .srb-baslik { font-size: 22px; }
  .srb-alanlar dd { font-size: 15px; }
}

@media (max-width: 560px) {
  .sekmeler { gap: 10px 12px; padding-left: 22px; margin-bottom: 22px; }
  .sekme { font-size: 8px !important; padding: 7px 9px !important; }
}