/* Fotoğraflar: deftere bantla yapıştırılmış baskılar. Açı, bant ve kalem izi foto.js ile her fotoğrafa sabit rastgele verilir. */
.foto{position:relative;display:block;width:fit-content;max-width:min(100%,520px);margin:34px auto;padding:10px 10px 12px;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 22px -10px rgba(0,0,0,.3);
  transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.foto img{display:block;max-width:100%;height:auto;border-radius:0!important;filter:saturate(.88) contrast(1.03);cursor:zoom-in}
.foto figcaption{margin:8px 4px 0;font:400 22px/1.2 var(--hand);color:var(--ink-2);text-align:center;background:none;position:static;padding:0}
.foto:hover{z-index:5;transform:translate(var(--x,0px),calc(var(--y,0px) - 4px)) rotate(calc(var(--r,0deg) * .4));box-shadow:0 2px 3px rgba(0,0,0,.12),0 18px 30px -12px rgba(0,0,0,.35)}
/* bant parçaları */
.foto::before,.foto::after{content:"";position:absolute;width:96px;height:26px;background:rgba(232,224,200,.78);pointer-events:none;
  box-shadow:0 1px 1px rgba(0,0,0,.05);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 12%,100% 25%,96% 40%,100% 55%,96% 70%,100% 85%,96% 100%,0 100%,4% 88%,0 74%,4% 58%,0 44%,4% 28%)}
.foto[data-v="0"]::before{top:-14px;left:calc(50% - 48px);transform:rotate(var(--t,-3deg))}
.foto[data-v="0"]::after{display:none}
.foto[data-v="1"]::before{top:-6px;left:-30px;transform:rotate(-38deg)}
.foto[data-v="1"]::after{top:-6px;right:-30px;transform:rotate(36deg)}
.foto[data-v="2"]::before{top:-4px;left:-28px;width:84px;transform:rotate(-34deg)}
.foto[data-v="2"]::after{bottom:-4px;right:-28px;width:84px;transform:rotate(-34deg)}
/* kalemle çevresi çizilmiş gibi: foto önce başka yerdeymiş */
.foto .kalem{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);overflow:visible;pointer-events:none;z-index:-1;
  transform:rotate(var(--k,0deg)) translate(var(--kx,0px),var(--ky,0px))}
.foto .kalem path{fill:none;stroke:var(--ink-3,#8d9096);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
/* birden fazla foto: defter arasına atılmış gibi üst üste */
.fotolar{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;padding:22px 18px 10px;margin:22px 0}
.fotolar .foto{margin:8px -12px;max-width:min(62%,300px)}
.fotolar .foto:nth-child(even){margin-top:34px}
.fotolar .foto img{max-height:340px;width:auto}
/* büyütme */
.foto-buyuk{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(253,253,251,.9);cursor:zoom-out;opacity:0;transition:opacity .25s;padding:20px}
.foto-buyuk.on{opacity:1}
.foto-buyuk figure{margin:0;background:#fff;padding:12px 12px 14px;box-shadow:0 20px 50px -18px rgba(0,0,0,.4);transform:rotate(var(--r,0deg)) scale(.96);transition:transform .3s;max-width:min(92vw,1100px)}
.foto-buyuk.on figure{transform:rotate(calc(var(--r,0deg) * .3)) scale(1)}
.foto-buyuk img{display:block;border-radius:0!important;max-width:100%;max-height:82vh;width:auto;height:auto}
.foto-buyuk figcaption{margin-top:8px;font:400 24px/1.2 var(--hand);color:var(--ink-2);text-align:center}
@media (max-width:600px){.fotolar{padding-inline:10px}.fotolar .foto{max-width:56%;margin:6px -10px;padding:7px 7px 9px}.fotolar .foto:nth-child(even){margin-top:26px}.fotolar .foto img{max-height:220px}.fotolar .foto figcaption{font-size:18px}}
@media (prefers-reduced-motion:reduce){.foto,.foto-buyuk figure{transition:none}}
/* panel içinde */
#sheet .body > .foto{margin:26px auto 18px}
#sheet .body > .fotolar{margin:6px -14px;padding-inline:6px}
#sheet .fotolar .foto{max-width:56%;margin:6px -12px;padding:8px 8px 10px}
#sheet .fotolar .foto img{max-height:240px}
#sheet .fotolar .foto figcaption{font-size:19px}