/* Paket 71: sahaf haritası, kargo haritası, kitap pasaportu, tezgâh, rozet kutlaması, raf modu, haftanın arananı, sesli okuyucu */
:root { --v71-wood-a: #8a6234; --v71-wood-b: #5b3e1f; }

/* ---------- Türkiye haritası (ortak) ---------- */
.tr-land, .sm-land { fill: var(--paper-2); stroke: var(--line-2); stroke-width: 1.4; stroke-linejoin: round; }

/* ---------- Sahaflar sayfası: Anadolu'nun sahafları ---------- */
.tr-map-box { margin: 6px 0 26px; padding: 18px 18px 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.tr-map-box h2 { margin: 0 0 2px; font-size: 1.35rem; }
.tr-map { display: block; width: 100%; height: auto; max-height: 440px; }
.tr-pin { cursor: pointer; outline: none; }
.tr-pin .tr-dot { fill: var(--accent); stroke: var(--card); stroke-width: 2.5; transition: transform .18s ease, fill .18s; transform-box: fill-box; transform-origin: center; }
.tr-pin .tr-halo { fill: var(--accent); opacity: .14; transition: opacity .18s; }
.tr-pin text { font: 700 15px var(--text); fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .15s; pointer-events: none; }
.tr-pin:hover .tr-dot, .tr-pin:focus-visible .tr-dot, .tr-pin.on .tr-dot { transform: scale(1.18); fill: var(--accent-2); }
.tr-pin:hover .tr-halo, .tr-pin:focus-visible .tr-halo, .tr-pin.on .tr-halo { opacity: .3; }
.tr-pin:hover text, .tr-pin:focus-visible text, .tr-pin.on text { opacity: 1; }
.tr-pin:focus-visible .tr-halo { stroke: var(--accent); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .tr-pin .tr-dot { animation: trPin .55s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
  .tr-pin .tr-halo { animation: trHalo 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * 230ms); }
}
@keyframes trPin { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes trHalo { 0%, 100% { opacity: .1; } 50% { opacity: .26; } }
.tr-filter { margin: 4px 0 8px; }

/* ---------- Sipariş sayfası: kargo yolculuğu haritası ---------- */
.ship-map { margin: 6px 0 0; padding: 10px 12px 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.ship-map svg { display: block; width: 100%; height: auto; max-height: 300px; }
.sm-arc { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .012 .022; opacity: .8; }
.sm-done { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; }
.sm-end circle { fill: var(--ink); stroke: var(--card); stroke-width: 3; }
.sm-end text { font: 700 20px var(--text); fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 5px; stroke-linejoin: round; }
.sm-to circle:not(.sm-pulse) { fill: var(--accent); }
.sm-to.arrived circle:not(.sm-pulse) { fill: var(--green-solid, #26805a); }
.sm-pulse { fill: none !important; stroke: var(--accent) !important; stroke-width: 3 !important; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sm-to:not(.arrived) .sm-pulse { animation: smPulse 2s ease-out infinite; }
.sm-truck-bg { fill: var(--card); stroke: var(--accent); stroke-width: 3; }
@keyframes smPulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.ship-map.st3 .sm-truck { animation: smBob 1.6s ease-in-out infinite; }
@keyframes smBob { 0%, 100% { transform: translate(var(--tx, 0), var(--ty, 0)); } 50% { transform: translate(var(--tx, 0), calc(var(--ty, 0) - 4px)); } }
@media (prefers-reduced-motion: reduce) { .sm-to .sm-pulse, .ship-map.st3 .sm-truck { animation: none; } }

/* ---------- Kitap pasaportu ---------- */
.pp-wrap { margin-top: 26px; margin-bottom: 40px; display: flex; justify-content: center; }
.pp-book { width: min(640px, 100%); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(40, 20, 10, .28); background: var(--fis-bg, #f0e3c2); }
.pp-cover { position: relative; text-align: center; padding: 34px 20px 30px; color: #f3dfa6;
  background: radial-gradient(520px 260px at 50% 0%, #8a2a22 0%, #5c1812 70%, #3d0f0b 100%); border-bottom: 6px solid #a07d37; }
.pp-cover::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid rgba(243, 223, 166, .45); border-radius: 8px; pointer-events: none; }
.pp-cover-seal { display: inline-flex; margin-bottom: 4px; color: #f3dfa6; }
.pp-kicker { margin: 0; font: 700 .8rem/1 var(--text); letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.pp-heading { margin: 8px 0 4px; font: 700 clamp(1.9rem, 6vw, 2.6rem)/1.05 var(--serif); color: #f6e7b8; letter-spacing: .03em; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.pp-no { margin: 0; font-family: 'Special Elite', 'Courier New', monospace; letter-spacing: .12em; opacity: .9; }
.pp-page { padding: 24px clamp(18px, 5vw, 36px) 26px; color: var(--fis-ink, #3a2c1c);
  background-image: repeating-linear-gradient(transparent 0 31px, var(--fis-line, rgba(70, 50, 25, .15)) 31px 32px); }
.pp-title { margin: 0; font: 700 1.7rem/1.15 var(--serif); }
.pp-author { margin: 2px 0 12px; font-family: 'Special Elite', 'Courier New', monospace; }
.pp-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 18px; margin: 0 0 14px; }
.pp-meta div { display: flex; flex-direction: column; }
.pp-meta dt { font: 700 .72rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pp-meta dd { margin: 0; font-family: 'Special Elite', 'Courier New', monospace; }
.pp-map { margin: 4px 0 8px; } .pp-map svg { display: block; width: 100%; height: auto; max-height: 230px; }
.pp-stops { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 12px; }
.pp-stop { display: flex; align-items: center; gap: 14px; }
.pp-stamp { flex: none; width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: rotate(var(--r, 0deg));
  border: 3px double var(--stamp, var(--fis-red, #b53a2b)); color: var(--stamp, var(--fis-red, #b53a2b)); opacity: .9; mix-blend-mode: multiply; padding: 6px; }
.pp-stamp b { font: 700 .72rem/1.1 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.pp-stamp i { font: normal 600 .66rem/1.2 'Special Elite', monospace; margin-top: 3px; }
.pp-stop.k-listed { --stamp: #2f6d4f; } .pp-stop.k-sold { --stamp: #b53a2b; } .pp-stop.k-shipped { --stamp: #2c5a92; } .pp-stop.k-delivered { --stamp: #8a6410; }
.pp-stop-text { font-family: 'Special Elite', 'Courier New', monospace; }
.pp-foot { margin: 6px 0 8px; } .pp-actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
@media print { .header, .topbar, .footer, .pp-actions, .tabbar, .nav-cats, #intro-splash { display: none !important; } .pp-book { box-shadow: none; } }
.passport-link { font-weight: 700; }

/* ---------- Tezgâh ---------- */
.shop-counter { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 0; margin: 0 0 20px; background: var(--fis-bg, #f0e3c2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.shop-counter img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; display: block; }
.shop-counter figcaption { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; color: var(--fis-ink, #3a2c1c); }
.shop-counter .sc-live { align-self: flex-start; font: 700 .78rem/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 20px; padding: 5px 11px 5px 24px; position: relative; }
.shop-counter .sc-live::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; animation: scLive 1.6s ease-in-out infinite; }
.shop-counter q { font: italic 600 1.25rem/1.35 var(--serif); quotes: "“" "”"; }
.shop-counter small { color: var(--muted); }
@keyframes scLive { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .shop-counter .sc-live::before { animation: none; } }
@media (max-width: 640px) { .shop-counter { grid-template-columns: 1fr; } .shop-counter img { max-height: 220px; } }

/* ---------- Rozet kutlaması ---------- */
.bdg-open { overflow: hidden; }
.bdg-celebrate { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 12, 6, .72); animation: bdgIn .3s ease both; }
.bdg-celebrate[hidden] { display: none; }
.bdg-celebrate.is-out { animation: bdgOut .26s ease both; }
.bdg-card { position: relative; width: min(420px, 100%); text-align: center; padding: 26px 24px 22px; background: var(--card); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); animation: bdgPop .55s cubic-bezier(.2,1.4,.4,1) .05s both; }
.bdg-kicker { margin: 0 0 10px; font: 700 .85rem/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.bdg-seal { width: 148px; height: 148px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff7e0; position: relative;
  background: radial-gradient(circle at 36% 28%, var(--sa, #cf5040), var(--sb, #8a1a12)); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 0 0 7px rgba(255, 255, 255, .12); animation: bdgStamp .6s cubic-bezier(.3,1.8,.5,1) .35s both; }
.bdg-seal::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 2px solid rgba(255, 247, 224, .55); }
.bdg-seal svg { width: 84px; height: 84px; }
.bdg-seal.k-ilk-kitap { --sa: #3b8a62; --sb: #1f5a3c; } .bdg-seal.k-cok-sahafli { --sa: #4a70ad; --sb: #27457a; } .bdg-seal.k-koleksiyoner, .bdg-seal.k-yorumcu { --sa: #d2a643; --sb: #8a6410; }
.bdg-card h2 { margin: 6px 0 4px; font-size: 1.9rem; }
.bdg-hint { margin: 0 0 14px; color: var(--ink-2); }
.bdg-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.bdg-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bdg-confetti i { position: absolute; top: -16px; left: var(--x); width: 9px; height: 16px; background: var(--c); border-radius: 2px; transform: rotate(var(--r)); animation: bdgFall var(--d) cubic-bezier(.3,.5,.6,1) var(--w) both; }
@keyframes bdgIn { from { opacity: 0; } to { opacity: 1; } } @keyframes bdgOut { to { opacity: 0; } }
@keyframes bdgPop { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes bdgStamp { 0% { transform: scale(2.4) rotate(-18deg); opacity: 0; } 60% { transform: scale(.94) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes bdgFall { 0% { transform: translateY(0) rotate(var(--r)); opacity: 1; } 100% { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .bdg-confetti { display: none; } .bdg-seal, .bdg-card { animation: none; } }

/* ---------- Haftanın arananı ---------- */
.wk-wanted { margin: 26px 0; }
.wk-card { position: relative; max-width: 760px; margin: 0 auto; padding: 22px 26px 20px; background: var(--fis-bg, #f0e3c2); border: 1px solid var(--fis-line, rgba(70, 50, 25, .2)); border-top: 4px solid var(--fis-red, #b53a2b); border-radius: 6px; box-shadow: 0 10px 28px rgba(40, 20, 10, .14); color: var(--fis-ink, #3a2c1c);
  background-image: repeating-linear-gradient(transparent 0 31px, var(--fis-line, rgba(70, 50, 25, .15)) 31px 32px); transform: rotate(-.6deg); }
.wk-kicker { margin: 0; font: 700 .85rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--fis-red, #b53a2b); }
.wk-card h2 { margin: 8px 0 2px; font-size: 1.9rem; color: var(--fis-ink, #3a2c1c); }
.wk-meta { margin: 0 0 8px; font-family: 'Special Elite', 'Courier New', monospace; }
.wk-text { margin: 0 0 12px; max-width: 56ch; }
.wk-actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.wk-stamp { position: absolute; right: 18px; top: 16px; transform: rotate(8deg); font: 700 .95rem/1 var(--text); letter-spacing: .14em; color: var(--fis-red, #b53a2b); border: 3px solid var(--fis-red, #b53a2b); border-radius: 6px; padding: 6px 10px; opacity: .85; mix-blend-mode: multiply; }
@media (max-width: 560px) { .wk-stamp { position: static; display: inline-block; margin-bottom: 8px; } }

/* ---------- Sesli okuyucu ---------- */
.listen-row { margin: 4px 0 8px; }
.listen-btn[hidden] { display: none; }
.listen-btn { display: inline-flex; align-items: center; gap: 6px; }
.listen-btn.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Raf modu ---------- */
.rf-wrap { padding-bottom: 30px; }
.rf-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.rf-cats a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: var(--fs-3); }
.rf-cats a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rf-case { padding: 22px 18px 10px; border-radius: 12px; background: linear-gradient(180deg, #3a2716, #2a1b0e); box-shadow: inset 0 0 40px rgba(0, 0, 0, .55), 0 14px 34px rgba(40, 20, 10, .3); display: grid; gap: 22px; }
.rf-shelf { position: relative; }
.rf-row { display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; overflow-y: hidden; padding: 28px 6px 0; scrollbar-width: thin; scrollbar-color: #8a6234 transparent; min-height: 270px; }
.rf-board { height: 18px; margin: 0 -6px; border-radius: 3px; background: linear-gradient(180deg, var(--v71-wood-a), var(--v71-wood-b)); box-shadow: 0 8px 14px rgba(0, 0, 0, .5); }
.rf-spine { flex: none; width: var(--w); height: var(--h); background: var(--bg); color: var(--fg); border-radius: 3px 3px 1px 1px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: inset -3px 0 5px rgba(0, 0, 0, .3), inset 2px 0 3px rgba(255, 255, 255, .12); transition: transform .22s cubic-bezier(.2,.9,.3,1.2), box-shadow .22s; outline-offset: 3px; }
.rf-spine::before, .rf-spine::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--fg); opacity: .55; }
.rf-spine::before { top: 14px; } .rf-spine::after { bottom: 14px; }
.rf-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 .95rem/1.1 var(--serif); max-height: calc(var(--h) - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px; }
.rf-spine:hover, .rf-spine:focus-visible { transform: translateY(-14px); box-shadow: inset -3px 0 5px rgba(0, 0, 0, .3), 0 14px 18px rgba(0, 0, 0, .5); }
.rf-spine.is-pulled { transform: translateY(-40px) rotate(2deg); opacity: .35; }
@media (prefers-reduced-motion: no-preference) { .rf-spine { animation: rfIn .45s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: var(--d); } }
@keyframes rfIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.rf-pull { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 12, 6, .7); animation: bdgIn .2s ease both; }
.rf-pull.is-out { animation: bdgOut .2s ease both; }
.rf-pull-card { display: grid; grid-template-columns: 200px 1fr; gap: 22px; width: min(620px, 100%); padding: 22px; background: var(--card); border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); animation: bdgPop .4s cubic-bezier(.2,1.3,.4,1) both; }
.rf-pull-cover { perspective: 700px; } .rf-pull-cover img { width: 100%; aspect-ratio: 32 / 46; object-fit: cover; border-radius: 4px 8px 8px 4px; box-shadow: 8px 10px 22px rgba(30, 20, 10, .4); transition: transform .12s ease-out; }
.rf-pull-info h2 { margin: 0 0 4px; font-size: 1.5rem; } .rf-pull-author { margin: 0 0 6px; font-style: italic; } .rf-pull-meta { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-3); }
.rf-pull-price { margin: 0 0 14px; font: 700 1.5rem/1 var(--serif); color: var(--accent); } .rf-pull-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .rf-pull-card { grid-template-columns: 120px 1fr; gap: 14px; padding: 16px; } .rf-pull-info h2 { font-size: 1.2rem; } }