/* =========================================================
   DUVAR.CSS — başarım duvarı (Sertifikalar sayfası + anasayfa rafı ortak)
   Yeşil duvar kâğıdı · kupalar kendi küçük rafında · çerçeveler ve bröve kutuları çiviye asılı (altlarında raf yok)
   ========================================================= */
.sr-izgara {
  position: relative; list-style: none; margin: 0; padding: 40px 24px 6px;
  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='%23173a34'/%3E%3Crect%20x='0'%20y='0'%20width='1'%20height='16'%20fill='%231d463f'/%3E%3Crect%20x='8'%20y='0'%20width='1'%20height='16'%20fill='%2314332e'/%3E%3Crect%20x='4'%20y='6'%20width='1'%20height='1'%20fill='%2323524a'/%3E%3Crect%20x='3'%20y='7'%20width='3'%20height='1'%20fill='%2323524a'/%3E%3Crect%20x='4'%20y='8'%20width='1'%20height='1'%20fill='%2323524a'/%3E%3Crect%20x='12'%20y='14'%20width='1'%20height='1'%20fill='%231f4a43'/%3E%3C/svg%3E") 0 0 / 32px 32px repeat, #173a34;
  box-shadow: inset 0 0 0 4px var(--murekkep), 0 0 0 4px var(--wood), 8px 8px 0 4px rgba(0, 0, 0, .35);
}
/* uçtan uca duvar bandı: duvar kâğıdı, korniş ve süpürgelik ekranın iki kenarına kadar; başarımlar ortadaki kapta */
.duvar-bant {
  position: relative; padding: 18px 0 30px;
  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='%23173a34'/%3E%3Crect%20x='0'%20y='0'%20width='1'%20height='16'%20fill='%231d463f'/%3E%3Crect%20x='8'%20y='0'%20width='1'%20height='16'%20fill='%2314332e'/%3E%3Crect%20x='4'%20y='6'%20width='1'%20height='1'%20fill='%2323524a'/%3E%3Crect%20x='3'%20y='7'%20width='3'%20height='1'%20fill='%2323524a'/%3E%3Crect%20x='4'%20y='8'%20width='1'%20height='1'%20fill='%2323524a'/%3E%3Crect%20x='12'%20y='14'%20width='1'%20height='1'%20fill='%231f4a43'/%3E%3C/svg%3E") 0 0 / 32px 32px repeat, #173a34;
  box-shadow: inset 0 4px 0 var(--murekkep), inset 0 -4px 0 var(--murekkep);
}
.duvar-bant::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 14px; background: #6b4226; box-shadow: inset 0 4px 0 #8b5e3c, inset 0 -2px 0 #3d2614, 0 4px 0 rgba(0, 0, 0, .3); }
.duvar-bant::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 22px; background: #5c3a1e; box-shadow: inset 0 4px 0 #8b5e3c, inset 0 6px 0 #3d2614, inset 0 -2px 0 #3a2010; }
.duvar-bant .sr-izgara { padding-top: 22px; background: none; box-shadow: none; }
.duvar-bant .sr-izgara::before { display: none; }
/* üstte ahşap korniş */
.sr-izgara::before { content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 14px; background: #6b4226; box-shadow: inset 0 4px 0 #8b5e3c, inset 0 -2px 0 #3d2614, 0 4px 0 rgba(0, 0, 0, .3); }
.sr-raf { position: relative; padding-bottom: 82px; }
.sr-raf-ogeler { list-style: none; margin: 0; padding: 0; display: grid; align-items: end; min-height: 176px; }
.sr-oge { position: relative; display: flex; justify-content: center; align-items: flex-end; min-width: 0; }

/* başarım: duvardaki nesne + altında rafa vidalı pirinç etiket */
.basarim {
  position: static; display: flex; flex-direction: column; align-items: center;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--f-piksel); color: var(--text);
}
.basarim:focus-visible { outline: none; }
.dv-nesne { position: relative; display: block; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .35)); }
.basarim:hover .dv-nesne:not(.dv-kupa), .basarim:focus-visible .dv-nesne:not(.dv-kupa),
.basarim:hover .dv-kupa-govde, .basarim:focus-visible .dv-kupa-govde {
  filter: drop-shadow(2px 0 0 var(--gold)) drop-shadow(-2px 0 0 var(--gold)) drop-shadow(0 2px 0 var(--gold)) drop-shadow(0 -2px 0 var(--gold)) drop-shadow(6px 6px 0 rgba(0, 0, 0, .35));
}
.dv-kupa { display: flex; flex-direction: column; align-items: center; filter: none; }
.dv-kupa-govde { position: relative; display: block; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .35)); transition: transform .15s steps(2); }
.basarim:hover .dv-kupa-govde, .basarim:focus-visible .dv-kupa-govde { transform: translateY(-4px); }
.dv-kupa-govde > .px-ikon { display: block; }
/* kupanın kendi duvar rafı: ahşap üst yüz + ön yüz, altında pirinç dirsekler */
.dv-raf { position: relative; display: block; width: 132px; height: 16px; margin-top: -2px; background: #8b5e3c; box-shadow: inset 0 6px 0 #b07a4f, inset 0 -2px 0 #5a3a22, 0 0 0 2px var(--murekkep), 0 8px 0 2px rgba(0, 0, 0, .28); }
.dv-raf i { position: absolute; top: 18px; width: 16px; height: 16px; background: #c9a347; clip-path: polygon(0 0, 100% 0, 100% 4px, 12px 4px, 12px 8px, 8px 8px, 8px 12px, 4px 12px, 4px 100%, 0 100%); }
.dv-raf i:first-child { left: 14px; }
.dv-raf i:last-child { right: 14px; transform: scaleX(-1); }
.dv-kupa-yil { position: absolute; left: 28px; top: 82px; width: 32px; font: 8px/8px var(--f-piksel); color: #3b2a0c; text-align: center; }
.dv-asili { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; }
.dv-tel { display: block; margin-bottom: -2px; }
/* bröve kutusu: ahşap çerçeve, lacivert kadife, kanatlı rozet */
.dv-kutu {
  position: relative; display: grid; place-items: center; width: 128px; height: 88px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4'%20height='4'%20shape-rendering='crispEdges'%3E%3Crect%20width='4'%20height='4'%20fill='%231d2b57'/%3E%3Crect%20x='0'%20y='0'%20width='1'%20height='1'%20fill='%2324346a'/%3E%3Crect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='%2318244a'/%3E%3C/svg%3E") 0 0 / 8px 8px repeat, #1d2b57;
  box-shadow: inset 0 0 0 2px #8b5e3c, inset 0 0 0 6px #6b4226, inset 0 0 0 8px #2a170b, 0 0 0 2px var(--murekkep);
}
.dv-kanat { display: flex; align-items: center; gap: 0; margin-top: -10px; }
.dv-kanat .px-ikon { display: block; }
.dv-kanat-ikon { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 -2px; }
.dv-kutu-etiket { position: absolute; bottom: 12px; left: 0; right: 0; width: max-content; margin: 0 auto; padding: 2px 4px; font: 8px/8px var(--f-piksel); color: #3b2a0c; background: #c9a347; box-shadow: 0 0 0 2px #6f5418; }
/* çerçeveli sertifika */
.dv-cerceve {
  --c: #6b4226; --c-a: #8b5e3c; --c-k: #3d2614;
  display: block; width: 148px; height: 112px; padding: 10px; background: var(--c);
  box-shadow: inset 0 0 0 2px var(--c-a), inset 0 0 0 8px var(--c), inset 0 0 0 10px var(--c-k), 0 0 0 2px var(--murekkep);
}
.dv-c-sanat { --c: #c9a347; --c-a: #f2d47e; --c-k: #6f5418; }
.dv-c-yazilim { --c: #26262c; --c-a: #4a4a55; --c-k: #0c0c10; }
.dv-c-havacilik { --c: #22305a; --c-a: #3d5088; --c-k: #0e1530; }
.dv-kagit {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  height: 100%; padding: 7px 8px 5px; background: #fbf4e2;
  box-shadow: inset 0 0 0 2px #e4d6b5, inset 0 0 0 4px #fbf4e2, inset 0 0 0 6px var(--renk);
}
.dv-k-ust { margin-top: 2px; font: 8px/8px var(--f-piksel); color: #5a4630; }
.dv-k-ikon .px-ikon { display: block; }
.dv-k-alt { display: flex; align-items: flex-end; justify-content: space-between; align-self: stretch; padding: 0 2px; }
.dv-k-alt .px-ikon { display: block; }
/* pirinç etiket (rafın ön yüzüne vidalı) */
.dv-plaka {
  position: absolute; left: 0; right: 0; top: calc(100% + 22px);
  width: 176px; max-width: calc(100% - 8px); margin: 0 auto; padding: 5px 8px 6px;
  display: flex; flex-direction: column; gap: 3px;
  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);
}
.dv-plaka b { font-family: var(--f-govde); font-weight: 700; font-size: 13px; line-height: 1.15; color: #2a1a08; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-plaka small { font-family: var(--f-govde); font-size: 12px; line-height: 1.1; color: #5c4313; }
.basarim:hover .dv-plaka, .basarim:focus-visible .dv-plaka { background: #e0bd5a; }
/* kilitli: gölge siluet + kilit; açılınca flaş */
.basarim-kilit { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: none; place-items: center; }
.basarim.kilitli .dv-asili > :not(.basarim-kilit), .basarim.kilitli .dv-kupa-govde > :not(.basarim-kilit) { filter: brightness(0); opacity: .5; }
.basarim.kilitli .basarim-kilit { display: grid; }
.basarim.kilitli .dv-plaka { filter: grayscale(1) brightness(.7); }
.basarim.aciliyor .dv-asili > :not(.basarim-kilit), .basarim.aciliyor .dv-kupa-govde > :not(.basarim-kilit) { animation: dvFlas .38s steps(4); }
.basarim.aciliyor .dv-asili, .basarim.aciliyor .dv-kupa-govde { animation: srZipla .38s steps(4); }
@keyframes dvFlas { from { filter: brightness(3); } to { filter: brightness(1); } }
@keyframes srZipla { 50% { transform: translateY(-8px); } }
a.basarim { text-decoration: none; color: inherit; }
@media (max-width: 560px) {
  .sr-izgara { padding: 36px 12px 6px; }
  .dv-plaka { width: 150px; }
}