/* 2027 Dilek Duvarı — kağıt, bant, çıkartma, el yazısı, mantar pano, havai fişek.
   /2027 sayfaları ve /canli/dilek/ kullanır. Kaynak: tools/site8/statik/dilek/kagit.css (taslaktan). */

/* Yalnız iki web yazı tipi (WOFF, tembel: kağıt o yazıyı kullanınca iner). Diğer el yazıları
   sistemde (Noteworthy, Bradley Hand, Marker Felt, Snell Roundhand…) yoksa bu ikisine düşer. */
@font-face { font-family: "DW Patrick"; src: url(/dilek/f/patrick.woff?v=1) format("woff"); font-display: swap; unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "DW Shadows"; src: url(/dilek/f/shadows.woff?v=1) format("woff"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }

:root {
  --kagit-golge: 0 1px 0 rgba(255,255,255,.55) inset, 0 18px 26px -18px rgba(60,38,18,.55), 0 2px 4px rgba(60,38,18,.16);
  --murekkep: #2A2118;
  --altin: #FFC94A;
  --teal: #067C72;
  --teal-2: #0A5F57;
}

/* ---------- El yazıları (uygulamanın yazılarına en yakın web karşılıkları) ---------- */
.y-patrick { --font: "DW Patrick", "Noteworthy", "Segoe Print", cursive; --fk: 1.02; }
.y-caveat { --font: "Bradley Hand", "DW Patrick", "Segoe Print", cursive; --fk: 1.04; }
.y-amatic { --font: "Marker Felt", "Chalkboard SE", "DW Patrick", cursive; --fk: .98; }
.y-shadows { --font: "DW Shadows", "Noteworthy", cursive; --fk: 1.0; }
.y-sacramento { --font: "Snell Roundhand", "Savoye LET", "DW Shadows", cursive; --fk: 1.08; --fw: 600; }
.y-courier { --font: "American Typewriter", "Courier New", "Courier Prime", monospace; --fk: .86; }
.y-noteworthy { --font: "Noteworthy", "DW Patrick", cursive; --fk: .96; --fw: 700; }
.y-marker { --font: "Marker Felt", "DW Patrick", cursive; --fk: .94; }
.y-chalk { --font: "Chalkboard SE", "DW Patrick", "Comic Sans MS", cursive; --fk: .9; }
/* dilek setinin diğer üç yazısı (uygulama: Kalam, Pacifico, sade sistem yazısı) */
.y-kalam { --font: "Kalam", "Bradley Hand", "Segoe Print", "DW Patrick", cursive; --fk: 1.0; }
.y-pacifico { --font: "Pacifico", "Brush Script MT", "Snell Roundhand", "DW Shadows", cursive; --fk: 1.04; --fw: 400; }
.y-clean { --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Hiragino Sans", "PingFang SC", "Apple SD Gothic Neo", "Noto Sans CJK JP", "Noto Sans", "Microsoft YaHei", "Malgun Gothic", sans-serif; --fk: .86; --fw: 500; }

/* ---------- Kağıt ---------- */
.not {
  --w: 176px; --r: 0deg; --zemin-k: #FFE79A; --yazi-k: var(--murekkep);
  position: relative; width: var(--w); min-height: calc(var(--w) * .96); padding: calc(var(--w) * .15) calc(var(--w) * .1) calc(var(--w) * .2);
  background: var(--zemin-k); color: var(--yazi-k); border-radius: 3px 3px calc(var(--w) * .1) 3px;
  box-shadow: var(--kagit-golge); rotate: var(--r); display: flex; flex-direction: column;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, opacity .4s, filter .4s;
  -webkit-tap-highlight-color: transparent; cursor: pointer; text-align: left;
}
.not::after { /* köşe kıvrımı */
  content: ""; position: absolute; right: 0; bottom: 0; width: calc(var(--w) * .17); height: calc(var(--w) * .17);
  border-radius: 0 0 calc(var(--w) * .1) 0; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.08) 50%, rgba(255,255,255,.35) 100%);
  pointer-events: none;
}
.not:hover { transform: translateY(-4px) rotate(.6deg); z-index: 5; }
.not .ny {
  margin: 0; font-family: var(--font); font-weight: var(--fw, 400); font-size: calc(var(--w) * .1 * var(--fk, 1)); line-height: 1.16;
  overflow-wrap: anywhere; flex: 1; position: relative; z-index: 1;
}
.not.uzun .ny { font-size: calc(var(--w) * .085 * var(--fk, 1)); }
.not.kisa .ny { font-size: calc(var(--w) * .125 * var(--fk, 1)); }
.not .ny:lang(ja), .not .ny:lang(zh) { font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "PingFang TC", sans-serif; font-weight: 500; font-size: calc(var(--w) * .088); line-height: 1.4; }
.not .ny:lang(ko) { font-family: "Apple SD Gothic Neo", sans-serif; font-weight: 600; font-size: calc(var(--w) * .088); line-height: 1.4; }
.not .ny:lang(ar) { font-family: "Farah", "Baghdad", "Geeza Pro", serif; font-size: calc(var(--w) * .11); line-height: 1.5; text-align: right; }
.not .ny:lang(th) { font-family: "Thonburi", sans-serif; font-size: calc(var(--w) * .085); line-height: 1.45; }
.not .ny:lang(uk), .not .ny:lang(el), .not .ny:lang(vi) { font-family: "DW Patrick", "Noteworthy", cursive; }

/* bant */
.not .bant {
  position: absolute; top: calc(var(--w) * -.07); left: 50%; width: calc(var(--w) * .52); height: calc(var(--w) * .16);
  translate: -50% 0; rotate: var(--br, -3deg); z-index: 3; pointer-events: none;
  background: center / cover no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.16));
}
.not .bant.kesik { opacity: .9; clip-path: polygon(3% 0, 97% 5%, 100% 30%, 98% 60%, 100% 100%, 2% 95%, 0 65%, 2% 35%); }
.not .bant.serbest { height: calc(var(--w) * .2); width: calc(var(--w) * .58); top: calc(var(--w) * -.1); background-size: contain; }
/* çıkartma */
.not .cik {
  position: absolute; right: calc(var(--w) * .04); bottom: calc(var(--w) * .12); width: calc(var(--w) * .3); height: calc(var(--w) * .3);
  background: center / contain no-repeat;
  rotate: var(--cr, 8deg); z-index: 2; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(60,38,18,.25));
}
.not .cik.sol { right: auto; left: calc(var(--w) * .05); }
/* kim + kalp */
.not .kim {
  position: absolute; left: calc(var(--w) * .08); right: calc(var(--w) * .08); bottom: calc(var(--w) * .045);
  display: flex; align-items: center; gap: 5px; z-index: 4; font: 600 calc(var(--w) * .062)/1 -apple-system, system-ui, sans-serif; color: rgba(42,33,24,.62);
}
.not .kim .bayrak { font-size: calc(var(--w) * .085); line-height: 1; }
.not .kim .ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.not .kalp {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px; border: 0; padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.6); color: #B9402E; font: 700 calc(var(--w) * .062)/1 -apple-system, system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 1px 2px rgba(60,38,18,.12);
}
.not .kalp svg { width: 1.05em; height: 1.05em; }
.not .kalp.dolu { background: #F26B5B; color: #fff; }
.not .kalp.pop { animation: kalp-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes kalp-pop { 0% { scale: 1; } 40% { scale: 1.35; } 100% { scale: 1; } }

/* kağıt renkleri */
.k-sari { --zemin-k: #FFE79A; }
.k-pembe { --zemin-k: #FFD3CB; }
.k-mavi { --zemin-k: #D3E6FB; }
.k-yesil { --zemin-k: #D9EFCF; }
.k-lila { --zemin-k: #E5DAFA; }
.k-krem { --zemin-k: #FFFBF0; }
.k-seftali { --zemin-k: #FFE0C2; }
.k-nane { --zemin-k: #CFF0E6; }

/* kağıt şekilleri */
.s-izgara { background: linear-gradient(rgba(47,127,224,.13) 1px, transparent 1px) 0 0 / 100% calc(var(--w) * .08), linear-gradient(90deg, rgba(47,127,224,.13) 1px, transparent 1px) 0 0 / calc(var(--w) * .08) 100%, #FDFDFB; border-radius: 2px; }
.s-cizgili { background: linear-gradient(90deg, transparent calc(var(--w) * .12), rgba(242,107,91,.45) calc(var(--w) * .12), rgba(242,107,91,.45) calc(var(--w) * .12 + 1.5px), transparent calc(var(--w) * .12 + 1.5px)), repeating-linear-gradient(transparent 0 calc(var(--w) * .105), rgba(47,127,224,.22) calc(var(--w) * .105) calc(var(--w) * .105 + 1px)) 0 calc(var(--w) * .12) / 100% 100% no-repeat, #FFFEF8; border-radius: 2px; padding-left: calc(var(--w) * .17); }
.s-cizgili .ny { line-height: calc(var(--w) * .105); }
.s-kraft { --zemin-k: #D8B78A; background-image: radial-gradient(rgba(90,60,30,.18) .8px, transparent 1.2px), radial-gradient(rgba(255,240,210,.25) .8px, transparent 1.2px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; border-radius: 2px; }
.s-bilet { border-radius: 6px;
  -webkit-mask: radial-gradient(circle calc(var(--w) * .055) at 0 58%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle calc(var(--w) * .055) at 100% 58%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle calc(var(--w) * .055) at 0 58%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle calc(var(--w) * .055) at 100% 58%, transparent 98%, #000) right / 51% 100% no-repeat;
  filter: drop-shadow(0 10px 10px rgba(60,38,18,.28)); box-shadow: none; }
.s-bilet::before { content: ""; position: absolute; left: 10%; right: 10%; top: 58%; border-top: 2px dashed rgba(42,33,24,.18); }
.s-bilet::after { display: none; }
.s-yirtik { border-radius: 2px; clip-path: polygon(0 0, 100% 0, 100% 94%, 94% 97%, 88% 94.5%, 81% 98%, 74% 95%, 67% 98.5%, 60% 95.5%, 53% 98%, 46% 95%, 39% 98.5%, 32% 95.5%, 25% 98%, 18% 95%, 11% 98%, 5% 95.5%, 0 97.5%); filter: drop-shadow(0 8px 9px rgba(60,38,18,.3)); box-shadow: none; }
.s-yirtik::after { display: none; }
.s-gece { --zemin-k: #1E2547; --yazi-k: #FFF4D6; background-image: radial-gradient(circle at 20% 30%, rgba(255,210,90,.9) 1px, transparent 1.6px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) .8px, transparent 1.4px), radial-gradient(circle at 45% 85%, rgba(255,210,90,.7) 1px, transparent 1.6px); background-size: 37px 41px, 29px 31px, 53px 47px; }
.s-gece .kim { color: rgba(255,244,214,.7); }
.s-gece .kalp { background: rgba(255,255,255,.14); color: #FFD25A; }
.s-yuvarlak { border-radius: calc(var(--w) * .12); }
.s-yuvarlak::after { display: none; }

/* ---------- Dilek setinin kağıtları (uygulamanın şekilleri) ----------
   classic, grid, spiral, notebook, indexCard, deckle, stamp, torn. Setteki görsel (doku) kağıdın KENDİSİDİR:
   yırtık/pul dişi/deckle kenarı ve köşe kıvrımı görselin saydamlığında. Bu yüzden dokulu kağıtta düz renk,
   kutu gölgesi ve CSS köşe kıvrımı kapanır; gölge şekli izler (drop-shadow). Görsel yoksa (dokusuz) aşağıdaki
   :not(.dokulu) kuralları şekli CSS ile yaklaşık çizer. Yazı yerleşimi (dolgu) iki durumda da şekle göre. */
.not.dokulu {
  background: var(--doku-k) center / 100% 100% no-repeat; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 12px 9px rgba(60,38,18,.26)) drop-shadow(0 1px 2px rgba(60,38,18,.18));
}
.not.dokulu::after { display: none; }
.s-spiral { padding-top: calc(var(--w) * .17); padding-left: calc(var(--w) * .15); }
.s-notebook { padding-left: calc(var(--w) * .22); }
.s-notebook .kim { left: calc(var(--w) * .2); }
.s-indexCard { padding-top: calc(var(--w) * .25); }
.s-stamp { padding: calc(var(--w) * .15) calc(var(--w) * .14) calc(var(--w) * .22); }
.s-torn { padding-top: calc(var(--w) * .18); }
.s-grid:not(.dokulu) { background-image: linear-gradient(rgba(47,127,224,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(47,127,224,.13) 1px, transparent 1px); background-size: 100% calc(var(--w) * .08), calc(var(--w) * .08) 100%; border-radius: 2px; }
.s-spiral:not(.dokulu), .s-notebook:not(.dokulu) { background-image: repeating-linear-gradient(transparent 0 calc(var(--w) * .105), rgba(47,127,224,.22) calc(var(--w) * .105) calc(var(--w) * .105 + 1px)); border-radius: 2px; }
.s-indexCard:not(.dokulu) { background-image: linear-gradient(transparent calc(var(--w) * .2), rgba(242,107,91,.5) calc(var(--w) * .2), rgba(242,107,91,.5) calc(var(--w) * .2 + 1.5px), transparent calc(var(--w) * .2 + 1.5px)); border-radius: 3px; }
.s-torn:not(.dokulu) { border-radius: 2px; clip-path: polygon(0 3%, 6% 0.5%, 13% 3.5%, 20% 1%, 27% 4%, 34% 1.5%, 41% 3.5%, 48% .5%, 55% 3%, 62% 1%, 69% 4%, 76% 1.5%, 83% 3.5%, 90% 1%, 100% 3%, 100% 100%, 0 100%); filter: drop-shadow(0 8px 9px rgba(60,38,18,.3)); box-shadow: none; }
.s-deckle:not(.dokulu) { border-radius: 4px 6px 3px 5px; }
.s-stamp:not(.dokulu) { border-radius: 0; outline: 2px dashed rgba(42,33,24,.18); outline-offset: calc(var(--w) * -.06); }
.s-torn:not(.dokulu)::after, .s-stamp:not(.dokulu)::after { display: none; }

/* koyu kağıt (setteki yazi_renk ya da üreticinin parlaklık yedeği → not.js .koyu) */
.not.koyu .kim { color: rgba(255,244,214,.72); }
.not.koyu .kalp { background: rgba(255,255,255,.14); color: #FFD25A; }
.not.koyu .kalp.dolu { background: #F26B5B; color: #fff; }
.not.koyu.ekip .kim .ad { color: #7FE0D4; }

/* ekip notu: açıkça etiketli, sahte kullanıcı yok */
.not.ekip .kim .ad { color: var(--teal); font-weight: 750; }
.ekip-rozet { display: inline-grid; place-items: center; width: calc(var(--w) * .1); height: calc(var(--w) * .1); border-radius: 28%; overflow: hidden; flex: none; }
.ekip-rozet img { width: 100%; height: 100%; }

/* senin notun: parlayan bant */
.not.benim { box-shadow: 0 0 0 2px rgba(255,201,74,.9), 0 0 34px 6px rgba(255,196,70,.55), var(--kagit-golge); z-index: 4; }
.not.benim .bant { filter: drop-shadow(0 0 6px rgba(255,214,102,.95)) drop-shadow(0 0 14px rgba(255,190,60,.7)); animation: bant-parla 2.4s ease-in-out infinite; }
@keyframes bant-parla { 50% { filter: drop-shadow(0 0 2px rgba(255,214,102,.6)) drop-shadow(0 0 6px rgba(255,190,60,.35)); } }
.not .etiket-benim { position: absolute; top: calc(var(--w) * -.2); right: calc(var(--w) * -.08); z-index: 6; padding: 4px 9px; border-radius: 999px; background: #1F1A14; color: #FFD25A; font: 700 11px/1 -apple-system, system-ui, sans-serif; letter-spacing: .02em; rotate: 6deg; white-space: nowrap; box-shadow: 0 6px 12px -4px rgba(0,0,0,.4); }

/* 31 Aralık: yanan ve geçmiş notlar */
.not.yandi { box-shadow: 0 0 0 2px rgba(255,214,102,.95), 0 0 30px 8px rgba(255,200,80,.75), 0 0 80px 10px rgba(255,170,60,.35); animation: yan 1.6s ease-in-out infinite; z-index: 4; }
@keyframes yan { 50% { box-shadow: 0 0 0 2px rgba(255,214,102,.7), 0 0 18px 4px rgba(255,200,80,.5), 0 0 50px 6px rgba(255,170,60,.2); } }
.not.gecti .yildizcik, .not.yandi .yildizcik { position: absolute; top: calc(var(--w) * -.04); left: calc(var(--w) * -.06); z-index: 6; padding: 3px 7px; border-radius: 999px; background: #FFD25A; color: #1F1A14; font: 800 10px/1 -apple-system, system-ui, sans-serif; rotate: -8deg; box-shadow: 0 4px 8px -3px rgba(0,0,0,.35); }
.not.bekliyor { filter: saturate(.75) brightness(.92); }

/* incelemede damgası */
.not.incelemede { filter: grayscale(.25); }
.damga { position: absolute; inset: auto 30% 22% 6%; z-index: 7; padding: 6px 8px; border: 2.5px solid #8A5A00; border-radius: 8px; color: #8A5A00; font: 800 13px/1.1 -apple-system, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; rotate: -9deg; background: rgba(255,246,224,.85); }

/* ---------- Mantar pano ---------- */
.mantar {
  position: relative; border-radius: 18px; padding: 44px 30px 40px;
  background-color: #C99A66;
  background-image:
    radial-gradient(rgba(96,58,24,.38) .9px, transparent 1.5px),
    radial-gradient(rgba(255,236,200,.28) .9px, transparent 1.5px),
    radial-gradient(rgba(120,72,30,.22) 1.6px, transparent 2.4px),
    radial-gradient(900px 500px at 30% 0%, rgba(255,230,180,.35), transparent 70%);
  background-size: 7px 7px, 11px 11px, 23px 19px, 100% 100%;
  background-position: 0 0, 3px 5px, 9px 2px, 0 0;
  box-shadow: inset 0 0 0 10px #9C6A3E, inset 0 0 0 12px rgba(255,255,255,.18), inset 0 10px 40px rgba(70,40,15,.35), 0 40px 80px -36px rgba(70,48,24,.55);
}
.mantar::before { /* çerçeve ahşap damarı */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 10px solid transparent; background: repeating-linear-gradient(90deg, rgba(60,30,10,.12) 0 2px, transparent 2px 9px) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
}
.duvar-parca { position: relative; display: grid; justify-content: center; justify-items: center; align-items: start; }
.duvar-parca > .not { margin-bottom: 4px; }

/* boş yer (açılış günü) */
.bos-yer { width: var(--w, 176px); aspect-ratio: 1; border: 2px dashed rgba(255,250,240,.6); border-radius: 6px; display: grid; place-items: center; text-align: center; padding: 14px; color: rgba(255,250,240,.92); font: 20px/1.15 "Bradley Hand", "DW Patrick", cursive; rotate: var(--r, 0deg); }

/* ---------- Havai fişek (CSS + JS kıvılcım) ---------- */
.havai { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 8; }
.patla { position: absolute; width: var(--b, 160px); height: var(--b, 160px); left: var(--x); top: var(--y); translate: -50% -50%; color: var(--c, #FFD25A); animation: patla var(--s, 2.6s) ease-out infinite; animation-delay: var(--g, 0s); opacity: 0; }
.patla svg { width: 100%; height: 100%; overflow: visible; }
@keyframes patla { 0% { scale: .15; opacity: 0; } 12% { opacity: 1; } 60% { scale: 1; opacity: .9; } 100% { scale: 1.12; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .not, .not .bant, .patla { animation: none !important; transition: none !important; }
  .patla { opacity: .85; scale: 1; }
  .not.yandi { animation: none; }
}

.ekip-rozet img { display: block; }
.not .kalp:focus-visible { outline: 2px solid #1F1A14; outline-offset: 2px; }