/* Nüsha görünümü: kâğıt zemin, baskı gibi küçük fotoğraflar, mürekkep damgası rozetler, kusur noktaları, mağaza raf şeridi, baskı çizgisi. Renkler tema değişkenlerinden gelir; açık/koyu tema otomatik uyar. */ :root { --pin: #a8241a; --wood-1: #8a5a2b; --wood-2: #5e3a17; } /* ---------- Nüsha çerçevesi (ilan fotoğrafı) ---------- */ .detail-cover.book-gallery { padding: 22px 18px 14px; background-color: var(--paper-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); border-radius: 3px; } .book-gallery .gallery-main img { background: var(--card); box-shadow: 0 1px 1px rgba(40, 25, 10, .35), 0 12px 22px -10px rgba(40, 25, 10, .55); } .book-gallery .gallery-thumbs { gap: 10px; padding: 16px 4px 4px; } .book-gallery .gallery-thumb { background: var(--card); border: 1px solid var(--line-2); padding: 4px; box-shadow: 0 1px 2px rgba(40, 25, 10, .3); } .book-gallery .gallery-thumb:nth-child(odd) { transform: rotate(-1.4deg); } .book-gallery .gallery-thumb:nth-child(even) { transform: rotate(1.1deg); } .book-gallery .gallery-thumb.is-active { transform: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 3px 8px rgba(40, 25, 10, .35); } @media (prefers-reduced-motion: no-preference) { .book-gallery .gallery-thumb { transition: transform .15s ease; } .book-gallery .gallery-thumb:hover { transform: translateY(-2px); } } .book-gallery .gallery-label { font-family: var(--serif); font-style: italic; font-size: 1rem; text-align: center; color: var(--ink-2); margin: 10px 0 0; } /* ---------- Mürekkep damgası rozetler (mum mührü olan "Nadir" hariç) ---------- */ .badges .badge:not(.rare) { background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--accent-2); font-family: var(--serif); font-size: .82rem; font-weight: 700; letter-spacing: .1em; padding: 2px 8px; border-radius: 2px; border: 2px solid currentColor; box-shadow: 0 0 0 1px color-mix(in srgb, var(--card) 90%, transparent); transform: rotate(-2.5deg); } .badges .badge.signed { color: var(--blue-2); } .badges .badge.first { color: var(--green-2); } .badges .badge.sold { color: var(--ink); } .badges .badge.passive, .badges .badge.secondhand { color: var(--ink-2); } .badges .badge:not(.rare):nth-child(even) { transform: rotate(1.8deg); } /* ---------- Kusur noktaları: ilan sayfası ---------- */ .pin-layer { position: absolute; pointer-events: none; z-index: 2; } .pin-dot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--pin); color: #fff; border: 2px solid #fff; font: 700 .8rem/1 var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .55); cursor: pointer; pointer-events: auto; display: grid; place-items: center; } .pin-dot:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; } .pin-tip { display: none; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 210px; background: var(--card); color: var(--ink); border: 1px solid var(--line-2); border-radius: 3px; padding: 7px 10px; font: 400 var(--fs-3)/1.35 var(--text); text-align: left; box-shadow: var(--shadow); z-index: 3; } .pin-dot.tip-left .pin-tip { left: auto; right: -6px; transform: none; } .pin-dot.tip-down .pin-tip { bottom: auto; top: calc(100% + 8px); } .pin-dot:hover .pin-tip, .pin-dot:focus-visible .pin-tip, .pin-dot.is-open .pin-tip { display: block; } .pin-notes { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 6px; } .pin-note { display: flex; gap: 10px; align-items: baseline; text-align: left; width: 100%; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; color: var(--ink); } .pin-note:hover strong { text-decoration: underline; } .pin-num { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pin); color: #fff; font: 700 .75rem/1 var(--text); } /* ---------- Kusur noktaları: sahaf formu ---------- */ .pin-editor .pin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .pin-stage-wrap { display: grid; gap: 8px; justify-items: start; margin: 8px 0; } .pin-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; border: 1px solid var(--line-2); background: var(--paper-2); } .pin-stage img { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; cursor: crosshair; } .pin-stage .pin-dot { cursor: grab; touch-action: none; width: 30px; height: 30px; } .pin-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; } .pin-item { display: grid; grid-template-columns: auto auto minmax(130px, 170px) 1fr auto; gap: 8px; align-items: center; } .pin-item input[type=text], .pin-item select { width: 100%; min-width: 0; } @media (max-width: 640px) { .pin-item { grid-template-columns: auto 1fr auto; } .pin-item select, .pin-item input[type=text] { grid-column: 1 / -1; } } /* ---------- Mağaza raf şeridi ---------- */ .vx-shelf { margin: 22px 0 8px; } .vx-shelf h2 { font-size: 1.35rem; margin: 0 0 8px; } .vx-shelf-row { display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; padding: 14px 14px 0; scroll-snap-type: x proximity; background: linear-gradient(var(--paper-2), var(--paper)); border: 1px solid var(--line); border-bottom: 0; border-radius: 3px 3px 0 0; } .vx-shelf-board { height: 12px; background: linear-gradient(var(--wood-1), var(--wood-2)); border-radius: 0 0 3px 3px; box-shadow: 0 5px 9px -4px rgba(0, 0, 0, .45); } .spine { flex: none; width: var(--w); height: var(--h); scroll-snap-align: start; display: block; position: relative; border-radius: 2px 2px 0 0; padding: 14px 0 12px; text-decoration: none; overflow: hidden; box-shadow: inset -2px 0 3px rgba(0, 0, 0, .28), inset 1px 0 0 rgba(255, 255, 255, .14); } .spine::before, .spine::after { content: ""; position: absolute; left: 3px; right: 3px; height: 2px; background: currentColor; opacity: .55; } .spine::before { top: 6px; } .spine::after { bottom: 6px; } .spine span { display: block; writing-mode: vertical-rl; text-orientation: mixed; max-height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 auto; font: 600 .78rem/1.1 var(--serif); letter-spacing: .03em; } .spine:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 1px; z-index: 1; } @media (prefers-reduced-motion: no-preference) { .spine { transition: transform .15s ease; } .spine:hover { transform: translateY(-9px); } } /* ---------- Baskı çizgisi ---------- */ .vx-timeline-box { margin: 0 0 22px; } .vx-timeline-box h3 { font-size: 1.15rem; margin: 0 0 6px; } .vx-timeline { list-style: none; margin: 0; padding: 22px 4px 4px; display: flex; gap: 0; overflow-x: auto; position: relative; } .vx-timeline li { flex: 1 0 118px; min-width: 118px; position: relative; padding-top: 18px; text-align: center; font-size: var(--fs-3); } .vx-timeline li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--line-2); } .vx-timeline li:first-child::before { left: 50%; } .vx-timeline li:last-child::before { right: 50%; } .vx-timeline li::after { content: ""; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink-2); } .vx-timeline li.is-current::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); } .vx-timeline strong { display: block; font: 700 1.1rem var(--serif); } .vx-timeline a { color: inherit; text-decoration: none; display: block; padding: 2px 4px; } .vx-timeline a:hover strong, .vx-timeline a:focus-visible strong { text-decoration: underline; } .vx-timeline .here { color: var(--accent); font-weight: 600; } /* ---------- Otomatik mağaza mührü ---------- */ .seal-mark { width: 100%; height: 100%; display: block; } .seal-mark .seal-ring { font: 700 8px var(--serif); letter-spacing: .4px; } /* Her kart "ikinci el" olduğundan kartlarda bu damga sakin kalır; gri ve düz */ .card .badges .badge.secondhand { transform: none; font-size: .7rem; letter-spacing: .06em; border-width: 1px; padding: 1px 6px; opacity: .9; } @media (pointer: coarse) { .pin-dot { width: 32px; height: 32px; } } /* ---------- Seçkiler ---------- */ .secki-lead { font: 400 1.2rem/1.5 var(--serif); max-width: 62ch; color: var(--ink-2); margin: 6px 0 4px; } .secki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 18px 0 30px; } .secki-tile { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow); text-decoration: none; color: inherit; } .secki-tile:hover strong, .secki-tile:focus-visible strong { text-decoration: underline; } .secki-fan { position: relative; height: 128px; } .secki-fan img { position: absolute; bottom: 0; width: 70px; height: 104px; object-fit: cover; border: 3px solid var(--card); box-shadow: 0 2px 6px rgba(40, 25, 10, .4); background: var(--paper-2); } .secki-fan img:nth-child(1) { left: 0; transform: rotate(-7deg); } .secki-fan img:nth-child(2) { left: 20px; z-index: 1; height: 112px; } .secki-fan img:nth-child(3) { left: 40px; transform: rotate(7deg); z-index: 2; } .secki-text { display: grid; gap: 4px; } .secki-text strong { font: 600 1.35rem/1.15 var(--serif); } @media (max-width: 420px) { .secki-tile { grid-template-columns: 96px 1fr; } } /* ---------- Sahafı ve okuru koruyan eklemeler (lib/seller-care.js) ---------- */ .net-earn { margin: 10px 0 12px; padding: 10px 14px; border: 1px dashed var(--line-2); border-radius: 4px; display: grid; gap: 4px; max-width: 420px; } .net-earn[hidden] { display: none; } .net-earn > div { display: flex; justify-content: space-between; gap: 12px; } .net-earn .net { border-top: 1px solid var(--line-2); padding-top: 6px; margin-top: 2px; font-size: 1.05rem; } .net-earn p { margin: 4px 0 0; } .sc-evidence { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-2); } .sc-ev-grid { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .sc-ev-grid li { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sc-ev-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line-2); border-radius: 3px; display: block; } .sc-ev-form { margin-top: 10px; } .sc-thanks { margin: 12px 0; padding: 12px 16px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); border-radius: 0 4px 4px 0; } .sc-thanks-text { margin: 0 0 4px; font-style: italic; font-size: 1.05rem; overflow-wrap: anywhere; } .sc-col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .sc-col-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .sc-col-list .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sc-pick { list-style: none; margin: 8px 0; padding: 0; max-height: 420px; overflow: auto; border: 1px solid var(--line-2); border-radius: 4px; } .sc-pick li { padding: 6px 10px; border-bottom: 1px solid var(--line-2); } .sc-pick li:last-child { border-bottom: 0; } .sc-shop-cols, .vx-others { margin: 18px 0; } .sc-shop-cols ul, .sc-col-public { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .sc-shop-cols a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 4px; text-decoration: none; color: var(--ink); background: var(--card); } .sc-shop-cols a:hover strong { text-decoration: underline; } .sc-col-public li { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--card); } .sc-matches ul { padding-left: 18px; margin: 8px 0 0; } .gallery-dialog .pin-layer { z-index: 3; } .sc-decisions { margin: 14px 0; } .sc-decision { margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--line-2); background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 0 4px 4px 0; } .sc-decision.sc-d-onay { border-left-color: #2f6b3d; } .sc-decision.sc-d-red { border-left-color: #a33a2b; } .sc-decision.sc-d-bilgi { border-left-color: var(--gold); } .sc-decision.is-older { opacity: .72; } .sc-decide-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); } .sc-decide-form .check { display: block; margin: 4px 0; } /* ---------- Kitap kartında "Sepete ekle" ---------- */ .card-cart-form { margin: 10px 0 0; } .card-cart { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; } .card-cart svg { flex: none; } .card-cart.in-cart { margin-top: 10px; text-decoration: none; } .cart-toast { position: fixed; left: 50%; bottom: 20px; z-index: 300; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; gap: 14px; align-items: center; max-width: min(92vw, 520px); padding: 11px 16px; background: var(--ink); color: var(--card); border-radius: 4px; box-shadow: var(--shadow); font-size: var(--fs-3, .9rem); transition: opacity .18s ease, transform .18s ease; } .cart-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .cart-toast.is-error { background: #7a2e2e; color: #fff; } .cart-toast a { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .cart-toast { transition: none; } } /* Mobil: uzun bölüm başlığı "Tümü →" bağlantısını ekran dışına itmesin */ .section-title h2 { min-width: 0; overflow-wrap: anywhere; } .section-title a { flex: none; white-space: nowrap; } @media (max-width: 520px) { .section-title h2 { font-size: 1.15rem; } } .card-cart { white-space: nowrap; } @media (max-width: 520px) { .card-cart { font-size: .8rem; padding-left: 8px; padding-right: 8px; gap: 6px; letter-spacing: 0; } } /* ── Kitap gibi kartlar: kapak, ciltli bir kitap gibi rafta durur (cilt kalınlığı, sayfa kenarı, yer gölgesi) ── */ .card .card-cover { display: grid; place-items: center; padding: 14px 16px 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 8%, #f7f0e0 0%, #eadcc0 100%); } .card .card-cover img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; position: relative; border-radius: 1px 3px 3px 1px; /* sağda sayfa bloğu, altta raf gölgesi */ box-shadow: 1px 0 0 #f6efdc, 2px 0 0 #d9ccaa, 3px 0 0 #f6efdc, 4px 0 0 #cdbf9b, 0 10px 12px -6px rgba(45, 28, 12, .55), 0 2px 3px rgba(45, 28, 12, .25); } .card:hover .card-cover { box-shadow: none; transform: translateY(-4px); } .card:hover .card-cover img { box-shadow: 1px 0 0 #f6efdc, 2px 0 0 #d9ccaa, 3px 0 0 #f6efdc, 4px 0 0 #cdbf9b, 0 16px 16px -8px rgba(45, 28, 12, .6), 0 3px 4px rgba(45, 28, 12, .3); } @media (prefers-reduced-motion: reduce) { .card:hover .card-cover { transform: none; } } :root[data-theme="dark"] .card .card-cover { background: radial-gradient(120% 90% at 50% 8%, #3a3126 0%, #241d15 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card .card-cover { background: radial-gradient(120% 90% at 50% 8%, #3a3126 0%, #241d15 100%); } } /* ── Anasayfa: gerçek ilanların sırtlarından kayan raf ── */ .spine-rail { position: relative; border-top: 1px solid rgba(217,178,106,.25); background: linear-gradient(#1d1710, #14100b); padding: 22px 0 0; overflow: hidden; } .spine-rail::after { content: ""; display: block; height: 12px; margin-top: 0; background: linear-gradient(#6b4a26, #3d2a14); box-shadow: 0 -2px 0 rgba(0,0,0,.35) inset, 0 6px 12px rgba(0,0,0,.4); } .spine-rail::before, .spine-rail .sr-fade { content: ""; } .spine-rail .sr-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .spine-rail .sr-track { display: flex; align-items: flex-end; gap: 3px; width: max-content; padding: 0 8px; animation: sr-drift 70s linear infinite; } .spine-rail:hover .sr-track, .spine-rail:focus-within .sr-track { animation-play-state: paused; } @keyframes sr-drift { to { transform: translateX(-50%); } } .spine { position: relative; display: flex; align-items: center; justify-content: center; flex: none; color: var(--sp-fg, #f4e8cc); background: var(--sp-bg, #6b2d2d); border-radius: 2px 2px 0 0; text-decoration: none; overflow: hidden; transition: transform .2s ease; background-image: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.08) 18%, rgba(0,0,0,0) 40%, rgba(0,0,0,.22)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); } .spine::before, .spine::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--sp-fg, #f4e8cc); opacity: .55; } .spine::before { top: 9px; } .spine::after { bottom: 9px; } .spine:hover, .spine:focus-visible { transform: translateY(-10px); outline: none; } .spine:focus-visible { box-shadow: 0 0 0 2px #d9b26a; } .spine span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 .82rem/1.1 var(--serif, Georgia, serif); padding: 20px 0; max-height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; } .spine small { display: none; } @media (max-width: 760px) { .spine-rail { padding-top: 14px; } .spine span { font-size: .74rem; } .spine-rail .sr-track { animation-duration: 55s; } } @media (prefers-reduced-motion: reduce) { .spine-rail .sr-viewport { overflow-x: auto; } .spine-rail .sr-track { animation: none; } .spine-rail .sr-track [aria-hidden="true"] { display: none; } .spine:hover { transform: none; } } /* ── Boş durum çizimleri ── */ .empty .empty-art { display: block; width: 150px; height: auto; margin: 0 auto 14px; color: var(--accent, #8a1f1a); opacity: .8; } .empty h3 { font-family: var(--serif); } /* ── Kamera öncesi çekim rehberi ── */ dialog.cam-guide { border: 0; border-radius: 12px; padding: 18px; max-width: min(92vw, 420px); background: var(--paper, #fffaf0); color: var(--ink, #2b1d10); box-shadow: 0 20px 50px rgba(0,0,0,.4); } dialog.cam-guide::backdrop { background: rgba(20, 12, 4, .6); } dialog.cam-guide { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; } dialog.cam-guide svg { width: 96px; color: var(--accent, #8a1f1a); } dialog.cam-guide ul { margin: 8px 0 12px; padding-left: 18px; font-size: .92rem; line-height: 1.4; } @media (max-width: 380px) { dialog.cam-guide { grid-template-columns: 1fr; } dialog.cam-guide svg { margin: 0 auto; } } /* ── Haftanın sahafı ── */ .weekly-shop { display: grid; grid-template-columns: minmax(160px, 280px) 1fr; gap: 28px; align-items: center; margin: 34px 0; padding: 18px; border: 1px solid var(--line, #d9ccaa); border-radius: 10px; background: linear-gradient(135deg, #fbf4e2, #f1e5c8); } .weekly-shop .ws-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #eadcc0; color: #7a1f1a; } .weekly-shop .ws-photo img { width: 100%; height: 100%; object-fit: cover; } .weekly-shop .ws-photo .seal-mark { width: 62%; height: auto; } .weekly-shop h2 { font-size: .95rem; letter-spacing: .08em; color: var(--accent, #8a1f1a); margin: 0 0 4px; } .weekly-shop h3 { font-size: 1.9rem; margin: 0 0 10px; } .weekly-shop h3 a { text-decoration: none; color: inherit; } .weekly-shop .ws-story { font: italic 1.12rem/1.5 var(--serif); margin: 0 0 14px; max-width: 60ch; } :root[data-theme="dark"] .weekly-shop { background: linear-gradient(135deg, #2a2218, #1f1911); border-color: #4a3d2a; } :root[data-theme="dark"] .weekly-shop .ws-photo { background: #3a3126; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .weekly-shop { background: linear-gradient(135deg, #2a2218, #1f1911); border-color: #4a3d2a; } :root:not([data-theme="light"]) .weekly-shop .ws-photo { background: #3a3126; } } @media (max-width: 640px) { .weekly-shop { grid-template-columns: 1fr; gap: 14px; } .weekly-shop h3 { font-size: 1.5rem; } } /* ── Mevsimlik / özel gün teması (lib/seasons.js; html[data-season]) ── */ .season-greet { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 999px; font: 600 .9rem var(--text); letter-spacing: .02em; color: #fbf4e2; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); } .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat; opacity: 0; } .hero .wrap, .hero .spine-rail { z-index: 1; } html[data-season] .hero::after { opacity: .55; } html[data-season="sonbahar"] .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cpath transform='translate%2840 60%29 rotate%2830%29' d='M0 0C10 -14 26 -14 34 0C26 14 10 14 0 0Z' fill='%23c9822b'/%3E%3Cpath transform='translate%2840 60%29 rotate%2830%29' d='M2 0H32' stroke='%236b3410' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath transform='translate%28230 20%29 rotate%28-40%29' d='M0 0C10 -14 26 -14 34 0C26 14 10 14 0 0Z' fill='%23a8501e'/%3E%3Cpath transform='translate%28230 20%29 rotate%28-40%29' d='M2 0H32' stroke='%236b3410' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath transform='translate%28330 170%29 rotate%2870%29' d='M0 0C10 -14 26 -14 34 0C26 14 10 14 0 0Z' fill='%23d9a441'/%3E%3Cpath transform='translate%28330 170%29 rotate%2870%29' d='M2 0H32' stroke='%236b3410' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath transform='translate%28120 230%29 rotate%28110%29' d='M0 0C10 -14 26 -14 34 0C26 14 10 14 0 0Z' fill='%23b5601f'/%3E%3Cpath transform='translate%28120 230%29 rotate%28110%29' d='M2 0H32' stroke='%236b3410' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath transform='translate%28300 340%29 rotate%28-20%29' d='M0 0C10 -14 26 -14 34 0C26 14 10 14 0 0Z' fill='%23c9822b'/%3E%3Cpath transform='translate%28300 340%29 rotate%28-20%29' d='M2 0H32' stroke='%236b3410' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath transform='translate%2830 370%29 rotate%28150%29' d='M0 0C10 -14 26 -14 34 0C26 14 10 14 0 0Z' fill='%23d9a441'/%3E%3Cpath transform='translate%2830 370%29 rotate%28150%29' d='M2 0H32' stroke='%236b3410' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E"); background-size: 420px 420px; animation: season-fall 70s linear infinite; opacity: .32; } html[data-season="sonbahar"] .hero { box-shadow: inset 0 0 160px rgba(201,130,43,.22); } html[data-season="yilbasi"] .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Ccircle cx='30' cy='40' r='2.5' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='120' cy='90' r='1.8' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='210' cy='30' r='3' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='300' cy='120' r='2' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='70' cy='180' r='2.2' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='180' cy='210' r='3' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='270' cy='260' r='1.8' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='40' cy='300' r='2.8' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='150' cy='330' r='2' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='330' cy='330' r='2.5' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='240' cy='160' r='1.5' fill='white' fill-opacity='.8'/%3E%3C/svg%3E"); background-size: 360px 360px; animation: season-fall 40s linear infinite; opacity: .6; } html[data-season="yilbasi"] .hero { box-shadow: inset 0 0 160px rgba(120,160,220,.22); } html[data-season="ramazan"] .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='300'%3E%3Cpath d='M60 40a26 26 0 1 0 26 40a21 21 0 1 1 -26 -40z' fill='%23e5c46b' fill-opacity='.85'/%3E%3Cpath transform='translate%28130 60%29 scale%281%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%28240 30%29 scale%280.8%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%28310 110%29 scale%281.2%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%28190 150%29 scale%280.7%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%2870 200%29 scale%280.9%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%28280 240%29 scale%280.8%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3C/svg%3E"); background-size: 360px 300px; opacity: .45; animation: season-twinkle 6s ease-in-out infinite alternate; } html[data-season="ramazan"] .hero { box-shadow: inset 0 0 180px rgba(70,60,140,.35); } html[data-season="cumhuriyet"] .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='260'%3E%3Cpath d='M40 40a22 22 0 1 0 22 34a18 18 0 1 1 -22 -34z' fill='white' fill-opacity='.5'/%3E%3Cpath transform='translate%2878 52%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='white' fill-opacity='.5'/%3E%3C/svg%3E"); background-size: 300px 260px; opacity: .45; } html[data-season="cumhuriyet"] .hero { box-shadow: inset 0 0 160px rgba(200,30,40,.3); } html[data-season="cumhuriyet"] .season-greet { background: #b3202a; border-color: rgba(255,255,255,.5); } html[data-season="kutuphaneler"] .hero { box-shadow: inset 0 0 160px rgba(60,120,90,.3); } html[data-season="kutuphaneler"] .season-greet { background: rgba(46,110,80,.6); } @keyframes season-fall { to { background-position: -120px 420px; } } @keyframes season-twinkle { from { opacity: .3; } to { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .hero::after { animation: none !important; } } /* ── Sepete eklenen kitap rafa girer: uçan kapak ── */ .fly-book { position: fixed; z-index: 1200; pointer-events: none; margin: 0; border-radius: 2px; box-shadow: 0 8px 18px rgba(0,0,0,.35); transform-origin: center; will-change: transform, opacity; } a.hdr-link.cart-bump { animation: cart-bump .5s ease; } @keyframes cart-bump { 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(.96) rotate(3deg); } } /* ── İlan sayfasında kapak: ciltli kitap nesnesi (cilt oluğu, sayfa kenarı, yer gölgesi, hover'da hafif açılma) ── */ .book-gallery .gallery-main { perspective: 1100px; } .book-gallery .gallery-main img { position: relative; border-radius: 1px 4px 4px 1px; transform-origin: 0 50%; box-shadow: 1px 0 0 #f6efdc, 2px 0 0 #d9ccaa, 3px 0 0 #f6efdc, 4px 0 0 #cdbf9b, 5px 0 0 #f6efdc, 0 16px 20px -10px rgba(45, 28, 12, .6), 0 2px 4px rgba(45, 28, 12, .3); } .book-gallery .gallery-main::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 7%; pointer-events: none; border-radius: 1px 0 0 1px; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .12) 38%, rgba(0, 0, 0, .1) 70%, transparent); } .book-gallery .gallery-main::after { content: ""; position: absolute; z-index: 2; inset: 0 0 0 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .0) 40%, rgba(255, 255, 255, .13) 52%, rgba(255, 255, 255, 0) 64%); } @media (prefers-reduced-motion: no-preference) { .book-gallery .gallery-main img { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; } .book-gallery .gallery-main:hover img { transform: rotateY(-9deg) translateX(4px); box-shadow: 1px 0 0 #f6efdc, 2px 0 0 #d9ccaa, 3px 0 0 #f6efdc, 4px 0 0 #cdbf9b, 5px 0 0 #f6efdc, 22px 22px 24px -12px rgba(45, 28, 12, .6), 0 2px 4px rgba(45, 28, 12, .3); } } /* ── Sayfa geçişinde ince ilerleme çizgisi ── */ .nav-progress { position: fixed; z-index: 2000; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #a8241a, #d9b26a); box-shadow: 0 0 8px rgba(168, 36, 26, .5); pointer-events: none; } .nav-progress.go { width: 85%; transition: width 6s cubic-bezier(.1, .6, .2, 1); } @media (prefers-reduced-motion: reduce) { .nav-progress.go { transition: none; width: 60%; } } /* ── Kişisel kitaplığım: kayıtlı kitaplar raf sırtları olarak dizilir ── */ .my-shelf { display: flex; align-items: flex-end; gap: 3px; padding: 18px 14px 0; margin: 14px 0 20px; min-height: 130px; overflow-x: auto; border-radius: 6px 6px 0 0; background: linear-gradient(#efe3c8, #e3d3b0); border-bottom: 12px solid #6b4a26; box-shadow: inset 0 8px 14px rgba(60, 40, 20, .12); } .my-shelf .spine { cursor: default; } .my-shelf a.spine { cursor: pointer; } .my-shelf .spine:hover { transform: translateY(-6px); } :root[data-theme="dark"] .my-shelf { background: linear-gradient(#2a2218, #1f1911); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .my-shelf { background: linear-gradient(#2a2218, #1f1911); } } /* ── Mağaza sayfası: afiş + raf tek üst bölümde; mühür/ad kartı üstüne biner ── */ .shop-cover { position: relative; margin-top: 22px; min-height: 190px; border-radius: 8px 8px 0 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(#efe3c8, #dcc9a0); } .shop-cover.has-banner { min-height: 300px; background: #2b2019; } .shop-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .shop-cover.has-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20, 12, 5, .05) 20%, rgba(20, 12, 5, .55)); } .shop-cover .vx-shelf-row { position: relative; z-index: 1; padding-top: 28px; background: transparent !important; box-shadow: none !important; border: 0 !important; } .shop-cover .vx-shelf-board { position: relative; z-index: 1; border-radius: 0; } .shop-head.on-cover { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; } :root[data-theme="dark"] .shop-cover:not(.has-banner) { background: linear-gradient(#2a2218, #1f1911); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shop-cover:not(.has-banner) { background: linear-gradient(#2a2218, #1f1911); } } @media (max-width: 640px) { .shop-cover.has-banner { min-height: 200px; } .shop-head.on-cover { margin-left: 0; margin-right: 0; } } /* ── Yüklenirken boş yer tutan iskelet: kapaklar ve galeri görseli ── */ .is-loading { position: relative; } .is-loading::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 70%) #e9dcc0; background-size: 220% 100%; animation: skel 1.3s linear infinite; } img.sk-img { opacity: 0; } img.sk-img.is-in { opacity: 1; transition: opacity .3s ease; } @keyframes skel { from { background-position: 120% 0; } to { background-position: -120% 0; } } :root[data-theme="dark"] .is-loading::after { background-color: #2f271c; background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, 0) 70%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .is-loading::after { background-color: #2f271c; background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, 0) 70%); } } @media (prefers-reduced-motion: reduce) { .is-loading::after { animation: none; } img.sk-img.is-in { transition: none; } } html:not(.js-skel) img.sk-img { opacity: 1; } /* ── Mobil alt gezinme çubuğu ── */ .tabbar { display: none; } @media (max-width: 760px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .tabbar { display: flex; position: fixed; z-index: 900; left: 0; right: 0; bottom: 0; background: var(--card, #fffaf0); border-top: 1px solid var(--line, #d9ccaa); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 16px rgba(40, 25, 10, .12); } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; text-decoration: none; color: var(--ink-2, #5a4a3c); font: 600 .7rem var(--text); position: relative; min-height: 56px; justify-content: center; } .tabbar a svg { width: 22px; height: 22px; } .tabbar a.on { color: var(--accent, #a8241a); } .tabbar a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent, #a8241a); } .tabbar .count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; background: var(--accent, #a8241a); color: #fff; font-size: .66rem; line-height: 17px; text-align: center; } .cart-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; } .to-top, #to-top, .scroll-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; } } @media print { .tabbar { display: none !important; } } @media print { body:has(.shelf-pick) .dash { display: block; } } /* Mobilde hesap ve sepet alt çubukta; üst çubuk logoyu sıkıştırmasın */ @media (max-width: 760px) { a.hdr-link[href="/sepet"], a.hdr-link[href="/giris"], a.hdr-link[href="/hesabim/siparisler"] { display: none; } } /* ── Raftan bir kitap çek ── */ .spine-rail { position: relative; } .pull-book { position: absolute; z-index: 3; top: 12px; right: max(16px, calc((100% - 1240px) / 2 + 16px)); padding: 9px 16px; border-radius: 999px; cursor: pointer; font: 700 .85rem var(--text); letter-spacing: .02em; color: #2b1d10; background: linear-gradient(#f3d98d, #d9b26a); border: 1px solid #a57f36; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); } .pull-book:hover { filter: brightness(1.06); transform: translateY(-1px); } .pull-book:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .spine.is-pulled { animation: spine-pull .52s cubic-bezier(.3, .7, .3, 1) forwards; z-index: 5; } @keyframes spine-pull { 0% { transform: none; } 55% { transform: translateY(-34px) rotate(-2deg); } 100% { transform: translateY(-46px) scale(1.12) rotate(0); box-shadow: 0 14px 24px rgba(0, 0, 0, .6); } } @media (max-width: 760px) { .pull-book { top: 8px; right: 12px; padding: 7px 12px; font-size: .78rem; } } /* ── Kitap önizleme penceresi (kapak açılır) ── */ dialog.book-peek { border: 0; border-radius: 14px; padding: 22px; width: min(92vw, 560px); background: var(--paper, #fffaf0); color: var(--ink, #2b1d10); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); overflow: visible; } dialog.book-peek[open] { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 22px; align-items: center; } dialog.book-peek::backdrop { background: rgba(20, 12, 4, .62); backdrop-filter: blur(2px); } .bp-close { position: absolute; top: 6px; right: 10px; border: 0; background: none; font-size: 1.8rem; line-height: 1; color: inherit; cursor: pointer; } .bp-book { position: relative; perspective: 900px; } .bp-book img { display: block; width: 100%; border-radius: 1px 4px 4px 1px; transform-origin: 0 50%; box-shadow: 1px 0 0 #f6efdc, 2px 0 0 #d9ccaa, 3px 0 0 #f6efdc, 4px 0 0 #cdbf9b, 0 16px 20px -10px rgba(45, 28, 12, .6); } .bp-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .15) 52%, transparent 64%); } .book-peek.is-open .bp-book img { animation: bp-open .7s cubic-bezier(.2, .8, .2, 1) both; } @keyframes bp-open { from { transform: rotateY(-78deg) scale(.9); opacity: .2; } to { transform: rotateY(-4deg); opacity: 1; } } .bp-info { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .bp-title { font: 700 1.5rem/1.15 var(--serif); } .bp-author { font-style: italic; color: var(--ink-2, #5a4a3c); } .bp-price { font: 700 1.4rem var(--serif); color: var(--accent, #a8241a); margin: 4px 0 8px; } @media (max-width: 480px) { dialog.book-peek[open] { grid-template-columns: 110px 1fr; gap: 14px; padding: 18px 14px; } .bp-title { font-size: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .book-peek.is-open .bp-book img, .spine.is-pulled { animation: none; } } /* ── Kartlar / Raf görünümü ── */ .view-toggle { display: inline-flex; margin: 0 0 12px; border: 1px solid var(--line, #d9ccaa); border-radius: 999px; overflow: hidden; background: var(--card, #fffaf0); } .view-toggle button { border: 0; background: none; padding: 7px 18px; font: 600 .85rem var(--text); cursor: pointer; color: var(--ink-2, #5a4a3c); } .view-toggle button[aria-pressed="true"] { background: var(--accent, #a8241a); color: #fff; } .shelf-view { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 3px; padding: 0 14px; border-radius: 6px; background-color: #e9dcc0; background-image: repeating-linear-gradient(to bottom, transparent 0 218px, #6b4a26 218px 232px); background-position: 0 0; box-shadow: inset 0 10px 18px rgba(60, 40, 20, .15); } .shelf-view .sv-slot { height: 232px; padding-bottom: 14px; display: flex; align-items: flex-end; } .shelf-view .spine { cursor: pointer; } :root[data-theme="dark"] .shelf-view { background-color: #2a2218; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shelf-view { background-color: #2a2218; } } /* ── Mum mühür açılışı (yazısız): mühür kırılır, parşömen iki yana açılır ── */ .wax-open { position: fixed; z-index: 3000; inset: 0; cursor: pointer; overflow: hidden; } .wo-cur { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; transition: transform .85s cubic-bezier(.65, 0, .2, 1); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 45%, #f8efda 0, #ecdcb6 60%, #d9c18c 100%); background-size: 220px 220px, 200% 100%; } .wo-cl { left: 0; background-position: 0 0, 0 0; box-shadow: 6px 0 22px rgba(60, 35, 10, .35); } .wo-cr { right: 0; background-position: 0 0, 100% 0; box-shadow: -6px 0 22px rgba(60, 35, 10, .35); } .wax-open.is-opening .wo-cl { transform: translateX(-102%); } .wax-open.is-opening .wo-cr { transform: translateX(102%); } .wo-rib { position: absolute; z-index: 2; top: 50%; height: 30px; margin-top: -15px; width: 50%; transition: transform .6s cubic-bezier(.5, 0, .2, 1), opacity .5s; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 14px, rgba(255, 255, 255, .13) 14px 16px), linear-gradient(var(--wx), var(--wx2)); box-shadow: 0 3px 6px rgba(40, 15, 5, .35); } .wo-rl { left: 0; } .wo-rr { right: 0; } .wax-open.is-cracking .wo-rl { transform: translateX(-105%); opacity: 0; } .wax-open.is-cracking .wo-rr { transform: translateX(105%); opacity: 0; } .wax-open.is-opening .wo-seal { opacity: 0; } .wo-seal { position: absolute; z-index: 3; left: 50%; top: 50%; width: 168px; height: 168px; margin: -84px 0 0 -84px; filter: drop-shadow(0 10px 12px rgba(50, 15, 8, .5)); animation: wo-stamp .55s cubic-bezier(.2, 1.4, .4, 1) both; } .wo-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; } .wo-half { position: absolute; inset: 0; transition: transform .75s cubic-bezier(.3, .8, .3, 1), opacity .75s; } .wo-l { clip-path: polygon(0 0, 50% 0, 46% 12%, 54% 26%, 47% 40%, 55% 55%, 46% 70%, 53% 85%, 50% 100%, 0 100%); } .wo-r { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 53% 85%, 46% 70%, 55% 55%, 47% 40%, 54% 26%, 46% 12%); } .wax-open.is-cracking .wo-l { transform: translate(-120px, 60px) rotate(-24deg); opacity: 0; } .wax-open.is-cracking .wo-r { transform: translate(120px, 70px) rotate(26deg); opacity: 0; } .wo-crumbs { position: absolute; inset: 0; pointer-events: none; } .wo-crumbs s { position: absolute; left: 50%; top: 50%; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2); border-radius: 30% 60% 40% 55%; opacity: 0; text-decoration: none; } .wax-open.is-cracking .wo-crumbs s { animation: wo-crumb .8s cubic-bezier(.2, .7, .3, 1) forwards; } .wo-mute { position: absolute; z-index: 5; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(60, 35, 10, .12); color: #5a3a1c; display: grid; place-items: center; cursor: pointer; } @keyframes wo-stamp { from { transform: scale(1.7); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } } @keyframes wo-crumb { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 80px)) rotate(var(--r)); } } @media (max-width: 560px) { .wo-seal { width: 138px; height: 138px; margin: -69px 0 0 -69px; } } @media print { .wax-open { display: none !important; } } /* ---- Rozetler ---- */ .badge-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:10px 0} .badge-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;opacity:.5;filter:grayscale(1)} .badge-item.earned{opacity:1;filter:none} .badge-item small{color:var(--muted,#777);font-size:.75rem;line-height:1.25} .badge-medal{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#f6e8c6;background:radial-gradient(circle at 35% 30%,#b8452f,#7a1f14);box-shadow:inset 0 0 0 3px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.25)} .badge-item:not(.earned) .badge-medal{background:#8b8b8b} /* ---- Paylaşım sayfası ---- */ .share-page .panel{margin-bottom:16px} .share-thumbs{display:flex;gap:8px;overflow-x:auto;padding:6px 0 12px} .share-thumbs img{border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.2);display:block} .share-stats{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px} .share-week{border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2);max-width:100%;height:auto} .sign-form{display:grid;gap:12px} .sign-opt{display:grid;gap:4px;cursor:pointer} .sign-opt em{font-size:.8rem;color:var(--muted,#777)} /* ---- Dükkân tabelası ---- */ .shop-cover{position:relative} .shop-cover.has-sign{padding-top:64px} .shop-sign{position:relative;display:block;width:max-content;max-width:86%;margin:0 auto;text-align:center;z-index:2} .shop-cover > .shop-sign{position:absolute;top:0;left:50%;transform:translateX(-50%)} .shop-sign i{font-style:normal;font-family:'Lora',Georgia,serif;font-weight:700;font-size:1.25rem;display:block;padding:10px 26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .shop-sign::before,.shop-sign::after{content:"";position:absolute;top:-22px;width:2px;height:24px;background:#5b4a35} .shop-sign::before{left:18%}.shop-sign::after{right:18%} .sign-ahsap i{color:#f3e2bd;background:repeating-linear-gradient(90deg,#6b4423 0 22px,#5f3d1f 22px 24px),#6b4423;border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 0 0 2px #3f2812;text-shadow:0 1px 0 #2d1b0a} .sign-pirinc i{color:#4a3510;background:linear-gradient(135deg,#e8c872,#b98b2c 55%,#dcb55a);border-radius:3px;box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 0 0 2px #8a6618;text-shadow:0 1px 0 rgba(255,255,255,.4);letter-spacing:.04em} .sign-neon::before,.sign-neon::after{background:#444} .sign-neon i{color:#ffd9f4;background:#14101c;border-radius:8px;box-shadow:0 0 0 2px #ff4fc4,0 0 14px #ff4fc4,inset 0 0 12px rgba(255,79,196,.35);text-shadow:0 0 6px #ff4fc4,0 0 14px #ff4fc4} @media (prefers-reduced-motion:no-preference){.sign-neon i{animation:neonflick 6s infinite}} @keyframes neonflick{0%,92%,96%,100%{opacity:1}93%{opacity:.7}95%{opacity:.9}} .shop-sign.mini{margin:0;max-width:100%}.shop-sign.mini::before,.shop-sign.mini::after{display:none}.shop-sign.mini i{font-size:.9rem;padding:6px 14px} [data-theme=dark] .sign-ahsap i{box-shadow:0 3px 10px rgba(0,0,0,.6),inset 0 0 0 2px #2d1b0a} .sign-form .sign-opt{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .sign-form .sign-opt input[type=radio]{width:auto;flex:none;margin:0} .sign-form .sign-opt .shop-sign{flex:none} /* ── Ana sayfa kategori rafları ── */ .cat-shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; margin-bottom: 26px; } .cat-shelf { min-width: 0; } .cat-shelf-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-decoration: none; color: inherit; padding: 0 4px 6px; } .cat-shelf-label strong { font-family: var(--serif, 'Lora', Georgia, serif); font-size: 1.15rem; } .cat-shelf-label span { font-size: .8rem; color: var(--muted, #7a6a55); white-space: nowrap; } .cat-shelf .spine { transition: transform .18s ease; } .cat-shelf .spine:hover, .cat-shelf .spine:focus-visible { transform: translateY(-8px); } @media (max-width: 760px) { .cat-shelves { grid-template-columns: minmax(0, 1fr); gap: 18px; } } @media (prefers-reduced-motion: reduce) { .cat-shelf .spine { transition: none; } } /* ── Uygulama gibi kullanım (PWA) ── */ .app-back { display: none; } .app-install { position: fixed; z-index: 950; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card, #fffaf0); border: 1px solid var(--line, #d9ccaa); border-radius: 14px; box-shadow: 0 8px 28px rgba(40, 25, 10, .28); } .app-install img { border-radius: 9px; } .app-install strong { display: block; font-size: .95rem; } .app-install span { display: block; font-size: .78rem; color: var(--muted, #7a6a55); line-height: 1.3; } @media (min-width: 761px) { .app-install { left: auto; right: 20px; bottom: 20px; width: 380px; } } .net-toast { position: fixed; z-index: 960; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -140%); background: #2a1f17; color: #fff; padding: 9px 18px; border-radius: 999px; font: 600 .85rem var(--text, system-ui); transition: transform .25s ease; pointer-events: none; } .net-toast.on { transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .net-toast { transition: none; } } /* Sahaf alt çubuğu: ortada büyük "Yeni ilan" düğmesi */ .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; min-height: 56px; padding: 8px 4px 7px; color: var(--ink-2, #5a4a3c); font: 600 .7rem var(--text); cursor: pointer; } .tabbar button svg { width: 22px; height: 22px; } .tabbar .tab-add b { display: grid; place-items: center; width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: var(--accent, #a8241a); color: #fff; box-shadow: 0 4px 12px rgba(120, 30, 20, .4); } .tabbar .tab-add svg { width: 24px; height: 24px; } .tabbar .tab-add span { margin-top: -2px; } /* Menü çekmecesi */ .app-sheet { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 12, 6, .5); display: flex; align-items: flex-end; } .app-sheet-panel { width: 100%; max-height: 82vh; overflow-y: auto; background: var(--card, #fffaf0); border-radius: 18px 18px 0 0; padding: 6px 0 calc(16px + env(safe-area-inset-bottom, 0px)); animation: sheetUp .22s ease; } .app-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; position: sticky; top: 0; background: var(--card, #fffaf0); border-bottom: 1px solid var(--line, #d9ccaa); font-size: 1.05rem; } .app-sheet-x { font-size: 1.8rem; line-height: 1; background: none; border: 0; cursor: pointer; color: inherit; padding: 0 6px; } .app-sheet .side-nav { position: static; display: block; border: 0; box-shadow: none; background: transparent; } .app-sheet .side-nav a { padding: 14px 18px; } body.sheet-open { overflow: hidden; } @keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .app-sheet-panel { animation: none; } } @media (min-width: 761px) { .tabbar-seller { display: none; } } /* Kurulu uygulama (standalone) görünümü */ html.is-app { -webkit-tap-highlight-color: transparent; } html.is-app body { -webkit-touch-callout: none; } html.is-app .trust-strip { display: none; } /* Uygulamada da kayan duyuru şeridi görünür (pkg 104) */ html.is-app .header { padding-top: env(safe-area-inset-top, 0px); position: sticky; top: 0; z-index: 800; } html.is-app .app-back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0; color: var(--ink, #2a1f17); cursor: pointer; margin-right: 2px; flex: none; } @media (max-width: 760px) { html.is-app .logo-text span { display: none; } html.is-app .footer .cols { display: none; } } @media (pointer: coarse) { a, button, .btn, .card, .spine, .tabbar a { touch-action: manipulation; } .btn:active, .tabbar a:active, .tabbar button:active, .card:active, .cat-shelf-label:active { transform: scale(.97); transition: transform .08s; } } @media (display-mode: standalone) and (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; } } @media print { .app-install, .net-toast, .app-sheet { display: none !important; } } /* ── Eser fişi: kütüphane katalog kartı ── */ .catalog-card { background: repeating-linear-gradient(transparent 0 33px, rgba(120, 95, 60, .10) 33px 34px), var(--card); padding-top: 34px; border-radius: 3px; } .catalog-card::after { content: ""; position: absolute; top: 9px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 1px 2px rgba(60, 40, 20, .35); } .catalog-card-head .no { font-variant-numeric: tabular-nums; } .catalog-field dd { font-feature-settings: "onum"; } :root[data-theme="dark"] .catalog-card { background: repeating-linear-gradient(transparent 0 33px, rgba(255, 235, 200, .06) 33px 34px), var(--card); } /* ── Kondisyon göstergesi ── */ .cond-gauge { display: flex; align-items: center; gap: 14px; margin: -10px 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink-2); } .cond-gauge svg { flex: none; color: var(--ink-2); } .cond-gauge strong { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); } .cond-gauge span { display: block; font-size: .85rem; color: var(--muted); } .cond-pips { display: flex; gap: 4px; margin-bottom: 4px; } .cond-pips i { width: 26px; height: 6px; border-radius: 3px; background: var(--line); } .cond-pips i.on { background: var(--accent); } /* ── Favoriler: cam vitrin ── */ .vitrin-wrap { padding: 14px; border-radius: 10px; background: linear-gradient(180deg, #e9dcc0, #dccaa4); border: 6px solid #6b4a28; box-shadow: inset 0 0 0 2px #4a321a, inset 0 8px 30px rgba(0, 0, 0, .18), 0 6px 18px rgba(40, 25, 10, .25); position: relative; overflow: hidden; } .vitrin-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .32) 0 14%, transparent 14% 22%, rgba(255, 255, 255, .14) 22% 26%, transparent 26%); } .vitrin .card { box-shadow: 0 8px 16px rgba(30, 18, 6, .28); } .vitrin .card:nth-child(3n+1) { transform: rotate(-.8deg); } .vitrin .card:nth-child(3n+3) { transform: rotate(.8deg); } :root[data-theme="dark"] .vitrin-wrap { background: linear-gradient(180deg, #2c241a, #211a12); border-color: #4a321a; } @media (max-width: 760px) { .vitrin .card { transform: none !important; } } /* ── Sipariş çizgisi: kitap sırtları ── */ .order-tl .dot { width: 22px; height: 38px; border-radius: 3px 3px 1px 1px; border: 0; background: repeating-linear-gradient(transparent 0 6px, rgba(255,255,255,.35) 6px 8px, transparent 8px 30px), var(--line-2); color: #fff; font-size: .75rem; box-shadow: inset -3px 0 0 rgba(0,0,0,.18); } .order-tl li { padding-top: 46px; } .order-tl li::before { top: 38px; height: 6px; left: 0; right: -8px; background: linear-gradient(#8a6234, #5b3e1f); border-radius: 1px; } .order-tl li.done .dot { background: repeating-linear-gradient(transparent 0 6px, rgba(255,255,255,.35) 6px 8px, transparent 8px 30px), var(--green-solid); border: 0; } .order-tl li.done::before { background: linear-gradient(#8a6234, #5b3e1f); } .order-tl li.now .dot { height: 44px; top: -6px; background: repeating-linear-gradient(transparent 0 6px, rgba(255,255,255,.35) 6px 8px, transparent 8px 30px), var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(168, 36, 26, .18), inset -3px 0 0 rgba(0,0,0,.18); transform: rotate(-4deg); } .order-tl li.todo .dot { background: transparent; border: 2px dashed var(--line-2); color: var(--muted); box-shadow: none; } @media (max-width: 640px) { .order-tl li { padding: 0 0 14px 44px; } .order-tl li::before { left: 16px; top: 38px; width: 6px; } } /* ── Gün ışığı: akşam sıcak ton ── */ @media (prefers-color-scheme: light) { html[data-warm="1"]:not([data-theme]) { --paper: #f3e7cf; --paper-2: #ecdcbb; --card: #fbf2df; --line: #d8c6a2; } } body { transition: background-color .4s ease, color .4s ease; } @media (prefers-reduced-motion: reduce) { body { transition: none; } } /* ── Yükleme: rafa dizilen kitaplar ── */ .shelf-loader { position: fixed; z-index: 970; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: flex-end; gap: 3px; padding: 8px 12px 0; border-bottom: 5px solid #6b4a28; background: rgba(255, 250, 240, .92); border-radius: 8px 8px 0 0; box-shadow: 0 4px 14px rgba(40, 25, 10, .2); pointer-events: none; } .shelf-loader i { display: block; width: 9px; border-radius: 1px; transform-origin: bottom; animation: spineIn .9s ease-in-out infinite; } .shelf-loader i:nth-child(1) { height: 26px; background: #6b2d2d; animation-delay: 0s; } .shelf-loader i:nth-child(2) { height: 32px; background: #2f4a3a; animation-delay: .12s; } .shelf-loader i:nth-child(3) { height: 22px; background: #25394f; animation-delay: .24s; } .shelf-loader i:nth-child(4) { height: 30px; background: #7a5a2a; animation-delay: .36s; } .shelf-loader i:nth-child(5) { height: 27px; background: #4a2f4e; animation-delay: .48s; } @keyframes spineIn { 0%, 100% { transform: translateY(14px) scaleY(.2); opacity: 0; } 30%, 75% { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .shelf-loader i { animation: none; } } @media (min-width: 761px) { .shelf-loader { bottom: 24px; } } /* ── Rapor çubukları: kitap sırtı ── */ .bars .bar { height: 14px; background: linear-gradient(#e4d6b8, #d8c7a2); border-radius: 2px; border-bottom: 3px solid #6b4a28; overflow: visible; } .bars .bar i { height: 100%; border-radius: 2px 2px 0 0; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.3) 18px 20px), var(--accent); box-shadow: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(255,255,255,.28); } .bars li:nth-child(5n+2) .bar i { background-color: #2f4a3a; } .bars li:nth-child(5n+3) .bar i { background-color: #25394f; } .bars li:nth-child(5n+4) .bar i { background-color: #7a5a2a; } .bars li:nth-child(5n+5) .bar i { background-color: #4a2f4e; } /* ── Çerçeveli canlı kamera ── */ dialog.live-cam { padding: 0; border: 0; border-radius: 14px; background: #000; max-width: 96vw; width: 440px; overflow: hidden; color: #fff; } dialog.live-cam::backdrop { background: rgba(0, 0, 0, .75); } .live-cam .lc-stage { position: relative; aspect-ratio: 3 / 4; background: #111; } .live-cam video { width: 100%; height: 100%; object-fit: cover; display: block; } .live-cam .lc-frame { position: absolute; inset: 9% 14%; border: 2px dashed rgba(255, 255, 255, .85); border-radius: 4px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .42); } .live-cam .lc-frame::before, .live-cam .lc-frame::after { content: ""; position: absolute; background: rgba(255, 255, 255, .25); } .live-cam .lc-frame::before { left: 33.3%; right: 33.3%; top: 0; bottom: 0; border-left: 1px solid rgba(255,255,255,.4); border-right: 1px solid rgba(255,255,255,.4); background: none; } .live-cam .lc-frame::after { top: 33.3%; bottom: 33.3%; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.4); background: none; } .live-cam .lc-tilt { position: absolute; left: 50%; top: 50%; width: 70%; height: 0; border-top: 2px solid rgba(255, 255, 255, .9); transform: translate(-50%, -50%); transition: border-color .15s; } .live-cam .lc-tilt.ok { border-color: #5ee08a; } .live-cam .lc-hint { position: absolute; left: 0; right: 0; top: 8px; text-align: center; font: 600 .85rem var(--text, system-ui); text-shadow: 0 1px 3px #000; } .live-cam .lc-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: #111; } .live-cam .lc-shot { width: 62px; height: 62px; border-radius: 50%; border: 4px solid #fff; background: #fff; box-shadow: inset 0 0 0 4px #111; cursor: pointer; } .live-cam .lc-bar button:not(.lc-shot) { background: none; border: 0; color: #fff; font: 600 .9rem var(--text, system-ui); cursor: pointer; padding: 10px 6px; } /* ── Sahaf vitrini (öne çıkan 3 kitap) ── */ .shop-featured { margin: 6px 0 24px; padding: 18px 18px 14px; border-radius: 10px; background: linear-gradient(180deg, #2b1f15, #1c140d); color: #f3e6c8; box-shadow: 0 8px 22px rgba(30, 18, 6, .35); position: relative; } .shop-featured h2 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 12px; color: #f3e6c8; } .shop-featured .sf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .shop-featured a.sf-item { display: block; text-decoration: none; color: inherit; text-align: center; } .shop-featured .sf-cover { display: block; aspect-ratio: 2 / 3; background: #000 center / cover no-repeat; border-radius: 3px; box-shadow: 0 0 0 2px #8a6a3a, 0 0 26px rgba(255, 214, 140, .28); transition: transform .2s; } .shop-featured a.sf-item:hover .sf-cover, .shop-featured a.sf-item:focus-visible .sf-cover { transform: translateY(-4px); } .shop-featured strong { display: block; margin-top: 10px; font-family: var(--serif); font-size: .98rem; line-height: 1.25; } .shop-featured small { color: #e2c98f; font-size: .9rem; font-weight: 600; } .shop-featured::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 40px; background: radial-gradient(ellipse at 50% 0, rgba(255, 224, 160, .28), transparent 70%); pointer-events: none; } @media (max-width: 560px) { .shop-featured .sf-grid { gap: 10px; } .shop-featured strong { font-size: .82rem; } } .vt-pick { display: grid; grid-template-columns: 22px 44px 1fr; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); } .vt-pick img { width: 44px; height: 62px; object-fit: cover; border-radius: 2px; } .vt-pick input { width: auto; } .shop-featured .sf-grid { max-width: 720px; margin: 0 auto; } /* ══ Panel menüleri ve düğmeler: renk kodlu ══ Her menü grubu kendi rengini taşır (Satış yeşil, Araçlar turkuaz, Sipariş mavi, Hesap erik); bağlantılar o rengin hafif tonuyla boyanır, seçili olan grubun koyu rengiyle dolar. Renk, grup başlığından sonraki kardeş bağlantılara geçer. */ .side-nav { --c: var(--accent); --c2: var(--accent-2); } .side-nav .side-nav-group:nth-of-type(1) ~ a, .side-nav .side-nav-group:nth-of-type(1) { --c: var(--green); --c2: var(--green-2); } .side-nav .side-nav-group:nth-of-type(2) ~ a, .side-nav .side-nav-group:nth-of-type(2) { --c: var(--teal); --c2: var(--teal-2); } .side-nav .side-nav-group:nth-of-type(3) ~ a, .side-nav .side-nav-group:nth-of-type(3) { --c: var(--blue); --c2: var(--blue-2); } .side-nav .side-nav-group:nth-of-type(4) ~ a, .side-nav .side-nav-group:nth-of-type(4) { --c: var(--plum); --c2: var(--plum-2); } .side-nav .side-nav-group { border-left: 4px solid var(--c, var(--accent)); color: var(--c2, var(--ink-2)); background: color-mix(in srgb, var(--c, var(--accent)) 13%, var(--card)); } .side-nav .side-nav-group:nth-of-type(n) { border-left-color: var(--c); } .side-nav a { position: relative; padding-left: 40px; background: color-mix(in srgb, var(--c) 5%, var(--card)); transition: background .15s, color .15s, padding-left .15s; } .side-nav a::before { content: ""; position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 4px; background: var(--c); opacity: .85; transition: transform .15s; } .side-nav a:hover { background: color-mix(in srgb, var(--c) 15%, var(--card)); color: var(--c2); } .side-nav a:hover::before { transform: scale(1.2) rotate(8deg); } .side-nav a.on { background: var(--c2); color: #fff; font-weight: 700; box-shadow: none; } .side-nav a.on::before { background: #fff; opacity: 1; } .side-nav a.on .n { background: #fff; color: var(--c2); } .side-nav a[href="/panel/ilan/yeni"] { --c: var(--green); --c2: var(--green-2); color: var(--green-2); background: color-mix(in srgb, var(--green) 12%, var(--card)); } .side-nav a[href="/panel/ilan/yeni"].on { background: var(--green-2); color: #fff; } .side-nav a[href^="/sahaf/"] { --c: var(--gold); --c2: var(--gold-2); } .side-nav a.setup-todo::before { background: var(--gold-2); } :root[data-theme="dark"] .side-nav a { background: color-mix(in srgb, var(--c) 9%, var(--card)); } :root[data-theme="dark"] .side-nav a.on { background: color-mix(in srgb, var(--c) 60%, #000); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .side-nav a { background: color-mix(in srgb, var(--c) 9%, var(--card)); } } @media (max-width: 860px) { .side-nav a { padding: 10px 14px 10px 30px; border-color: color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: 22px; background: color-mix(in srgb, var(--c) 9%, var(--paper)); } .side-nav a::before { left: 12px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 3px; } .side-nav a.on { background: var(--c2); border-color: var(--c2); } } .app-sheet .side-nav a { padding: 14px 18px 14px 42px; border-radius: 0; } .app-sheet .side-nav a::before { left: 18px; width: 12px; height: 12px; margin-top: -6px; } /* Çerçeveli (ghost) düğmeler artık içi boş değil: hafif tonlu ve belirgin kenarlıklı */ .btn.ghost { background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); font-weight: 700; } .btn.ghost:hover:not([disabled]) { background: var(--accent); color: #fff; border-color: var(--accent); } .btn.ghost.blue { color: var(--blue-2); background: color-mix(in srgb, var(--blue) 9%, var(--card)); border-color: color-mix(in srgb, var(--blue) 55%, transparent); } .btn.ghost.blue:hover:not([disabled]) { background: var(--blue); color: #fff; border-color: var(--blue); } .btn.ghost.green { color: var(--green-2); background: color-mix(in srgb, var(--green) 9%, var(--card)); border-color: color-mix(in srgb, var(--green) 55%, transparent); } .btn.ghost.green:hover:not([disabled]) { background: var(--green); color: #fff; border-color: var(--green); } /* Eylemin anlamına göre renk: silme/kaldırma kırmızı, güncelleme/kaydetme yeşil, indirme mavi */ form[action$="/sil"] .btn, form[action$="/kaldir"] .btn, form[action*="/iptal"] .btn.ghost { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 60%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--card)); } form[action$="/sil"] .btn:hover:not([disabled]) { background: var(--danger); color: #fff; border-color: var(--danger); } form[action$="/sil"] .linkbtn, form[action$="/kaldir"] .linkbtn { color: var(--danger); text-decoration: none; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 10%, transparent); } form[action$="/sil"] .linkbtn:hover { background: var(--danger); color: #fff; } form[action$="/durum"] .btn.ghost, form[action$="/guncelle"] .btn.ghost { color: var(--green-2); border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 9%, var(--card)); } form[action$="/durum"] .btn.ghost:hover:not([disabled]) { background: var(--green); color: #fff; border-color: var(--green); } a.btn.ghost[download], a.btn.ghost[href$=".jpg"], a.btn.ghost[href$=".zip"], a.btn.ghost[href$=".csv"] { color: var(--blue-2); border-color: color-mix(in srgb, var(--blue) 55%, transparent); background: color-mix(in srgb, var(--blue) 9%, var(--card)); } a.btn.ghost[download]:hover, a.btn.ghost[href$=".jpg"]:hover, a.btn.ghost[href$=".zip"]:hover, a.btn.ghost[href$=".csv"]:hover { background: var(--blue); color: #fff; border-color: var(--blue); } /* Yönetim sekmeleri: her biri kendi renginde */ .admin-tab { --t: var(--accent); border-color: color-mix(in srgb, var(--t) 50%, var(--line-2)); background: color-mix(in srgb, var(--t) 8%, var(--card)); color: color-mix(in srgb, var(--t) 80%, var(--ink)); } .admin-tab:nth-child(6n+2) { --t: var(--teal); } .admin-tab:nth-child(6n+3) { --t: var(--blue); } .admin-tab:nth-child(6n+4) { --t: var(--green); } .admin-tab:nth-child(6n+5) { --t: var(--plum); } .admin-tab:nth-child(6n+6) { --t: var(--rust); } .admin-tab:hover { background: color-mix(in srgb, var(--t) 16%, var(--card)); border-color: var(--t); color: var(--t); } .admin-tab.on { background: var(--t); border-color: var(--t); color: #fff; } /* Kadife kutu: 1.000 TL üstü ilanlarda parşömen yerine kadife perde, altın şerit */ .wax-open.velvet .wo-cur { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .7 0 0 0 0 .5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 6px, rgba(255, 255, 255, .04) 6px 12px), radial-gradient(ellipse at 50% 40%, #6e1420 0, #3f0a12 70%, #280509 100%); background-size: 160px 160px, auto, 200% 100%; } .wax-open.velvet .wo-cl { box-shadow: 4px 0 0 #c9a24a, 8px 0 22px rgba(0, 0, 0, .5); } .wax-open.velvet .wo-cr { box-shadow: -4px 0 0 #c9a24a, -8px 0 22px rgba(0, 0, 0, .5); } .wax-open.velvet .wo-mute { background: rgba(255, 230, 180, .15); color: #f0d9a0; } /* Perde açılınca künye kartı sayfa çevirir gibi yerine oturur */ body.wax-reveal .catalog-card { transform-origin: left center; animation: cardTurn .9s .35s cubic-bezier(.2, .8, .2, 1) both; } body.wax-reveal .cond-gauge { animation: fadeUp .6s .8s both; } @keyframes cardTurn { from { transform: perspective(900px) rotateY(-75deg); opacity: 0; } to { transform: perspective(900px) rotateY(0); opacity: 1; } } @keyframes fadeUp { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { body.wax-reveal .catalog-card, body.wax-reveal .cond-gauge { animation: none; } } /* ===== Paket 15: üst çubuk eylemleri ve giriş formu renkli ===== */ .hdr-link { --c: var(--accent); } .hdr-link svg { box-sizing: content-box; padding: 6px; width: 22px; height: 22px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); transition: background .18s, color .18s, transform .18s, box-shadow .18s; } .hdr-link .lbl { color: color-mix(in srgb, var(--c) 78%, var(--ink-2)); } .hdr-link:hover { background: none; color: var(--c); } .hdr-link:hover svg, .hdr-link:focus-visible svg { background: var(--c); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 45%, transparent); } .hdr-link:hover .lbl { color: var(--c); } .hdr-link[href="/mesajlar"] { --c: var(--blue); } .hdr-link[href="/bildirimler"] { --c: var(--gold); } .hdr-link[href="/hesabim/favoriler"] { --c: #c2385a; } .hdr-link[href="/hesabim/siparisler"] { --c: var(--green); } .hdr-link[href="/giris"] { --c: var(--accent); } #theme-toggle { --c: var(--plum, #6d3a7d); } .hdr-link[href="/sepet"] { --c: var(--accent); } /* Sepet ve Giriş: dolu, belirgin düğme */ .hdr-link[href="/sepet"] svg, .hdr-link[href="/giris"] svg { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 2px 6px rgba(43, 26, 15, .25); } .hdr-link[href="/sepet"]:hover svg, .hdr-link[href="/giris"]:hover svg { filter: brightness(1.12); } .hdr-link .count { background: var(--gold); box-shadow: 0 0 0 2px var(--paper, #f6f0e2); } .hdr-link[href="/mesajlar"] .count { background: var(--blue); } .hdr-link[href="/sepet"] .count { background: var(--green-solid); } /* Giriş / kayıt / şifre sayfaları */ .auth .panel { position: relative; border-top: 4px solid var(--accent); background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); } .auth h1::before { content: ""; display: block; width: 64px; height: 64px; margin: -52px auto 14px; border-radius: 50%; background: var(--card, #fffdf6) url('/static/img/logo-mark.svg') center/46px no-repeat; box-shadow: 0 0 0 4px var(--card, #fffdf6), 0 0 0 5px color-mix(in srgb, var(--gold) 55%, transparent), 0 6px 16px rgba(43, 26, 15, .18); } .auth .field { position: relative; } .auth .field input { padding-left: 46px; background-repeat: no-repeat; background-position: 14px 50%; background-size: 20px; transition: border-color .15s, box-shadow .15s; } .auth .field input[type="email"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fa8' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); } .auth .field input[type="password"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5e0f' stroke-width='1.8'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } .auth .field input[type="email"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); outline: none; } .auth .field input[type="password"]:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); outline: none; } .auth-forgot { display: inline-block; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 600; text-decoration: none; } .auth-forgot:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); } .auth-alt { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; gap: 10px; } .auth-alt .btn { width: 100%; } .auth .btn.block.lg { padding-top: 14px; padding-bottom: 14px; } /* ===== Paket 15b: üst şerit ve alt bilgi renkli ===== */ .topbar nav > a { padding: 2px 12px; border-radius: 999px; opacity: 1; font-weight: 600; border: 1px solid transparent; transition: background .15s, transform .15s; } .topbar nav > a:nth-of-type(1) { background: rgba(224,189,117,.16); color: #f0d08a; } .topbar nav > a:nth-of-type(2) { background: rgba(111,203,156,.16); color: #8fdcb2; } .topbar nav > a:nth-of-type(3) { background: rgba(224,121,103,.20); color: #f2a493; } .topbar nav > a:nth-of-type(4) { background: rgba(127,176,224,.18); color: #a6cbee; } .topbar nav > a:nth-of-type(5) { background: rgba(190,140,214,.18); color: #d4b0e6; } .topbar nav > a:hover { color: #fff; transform: translateY(-1px); border-color: rgba(255,255,255,.35); } .topbar nav { align-items: center; gap: 8px; } .footer { --f1: #e0bd75; --f2: #6fcb9c; --f3: #e58a78; } .footer .cols > div:nth-child(2) { --fc: var(--f1); } .footer .cols > div:nth-child(3) { --fc: var(--f2); } .footer .cols > div:nth-child(4) { --fc: var(--f3); } .footer .cols > div:nth-child(n+2) h4 { display: inline-block; padding: 4px 14px 5px; margin-bottom: 14px; border-radius: 10px; color: var(--fc); background: color-mix(in srgb, var(--fc) 14%, transparent); border-left: 4px solid var(--fc); } .footer .cols > div:nth-child(n+2) li a { display: inline-flex; align-items: center; gap: 8px; padding: 3px 0; transition: color .15s, transform .15s; } .footer .cols > div:nth-child(n+2) li a::before { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--fc); opacity: .75; flex: none; transition: transform .2s, opacity .2s; } .footer .cols > div:nth-child(n+2) li a:hover { color: var(--fc); transform: translateX(3px); } .footer .cols > div:nth-child(n+2) li a:hover::before { opacity: 1; transform: rotate(45deg) scale(1.4); } .footer .foot-cta { font-weight: 700; padding: 9px 16px; border-radius: 10px; transition: filter .15s, transform .15s; } .footer .foot-cta[href="/siparis-takibi"] { background: linear-gradient(135deg, #e0bd75, #b98a2e); color: #2b1a0f; border-color: #e0bd75; } .footer .foot-cta[href="/iletisim"] { background: color-mix(in srgb, var(--f2) 18%, transparent); border-color: var(--f2); color: #a6e6c2; } .footer .foot-cta:hover { filter: brightness(1.12); transform: translateY(-1px); } .footer .pay-row > span { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); } .footer .pay-row > span:first-child { background: color-mix(in srgb, var(--f2) 12%, transparent); border-color: color-mix(in srgb, var(--f2) 35%, transparent); } .footer .pay-row > span:last-child { background: color-mix(in srgb, var(--f1) 12%, transparent); border-color: color-mix(in srgb, var(--f1) 35%, transparent); } .footer .pay-row .social a { padding: 2px 10px; margin-right: 6px; border-radius: 999px; background: color-mix(in srgb, var(--f3) 18%, transparent); color: #f2a493; font-weight: 700; } .footer .legal > span:last-child { display: flex; flex-wrap: wrap; gap: 6px; } .footer .legal > span:last-child a { padding: 3px 11px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); } .footer .legal > span:last-child a:hover { background: rgba(224,189,117,.18); border-color: rgba(224,189,117,.5); } .ss-discovery-nav { display: flex; flex-wrap: wrap; gap: 8px; } .ss-discovery-nav a, .ss-discovery-nav .foot-cta { text-decoration: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; background: color-mix(in srgb, var(--c, #e0bd75) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c, #e0bd75) 45%, transparent); color: var(--c, #e0bd75); margin: 0; transition: background .15s, transform .15s; } .ss-discovery-nav a:hover { background: color-mix(in srgb, var(--c, #e0bd75) 30%, transparent); transform: translateY(-1px); } .ss-discovery-nav a:nth-child(1) { --c: #e58a78; } .ss-discovery-nav a:nth-child(2) { --c: #8fb8e6; } .ss-discovery-nav a:nth-child(3) { --c: #6fcb9c; } .footer ~ .ss-discovery-nav, .ss-discovery-nav + .ss-discovery-nav { margin-top: 8px; } @media (max-width: 760px) { .topbar nav > a { padding: 2px 9px; } .topbar nav { gap: 4px; } } .footer .legal > span:last-child { font-size: 0; } .footer .legal > span:last-child a { font-size: var(--fs-2); } /* ===== Paket 19: paket, şerit ===== */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--gold)); opacity: 0; transition: opacity .2s; pointer-events: none; } .read-progress.is-on { opacity: 1; } .awn-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), 0 0 0 1px rgba(0,0,0,.2); } .pack-seal { width: 160px; margin: 0 auto 10px; } .pack-seal svg { width: 100%; height: auto; overflow: visible; } .pack-seal .ps-box { animation: ps-pop .6s ease-out both; transform-origin: 110px 100px; } .pack-seal .ps-twine path { stroke-dasharray: 90; stroke-dashoffset: 90; } .pack-seal.play .ps-twine path { animation: ps-draw .9s .45s ease-out forwards; } .pack-seal .ps-seal { opacity: 0; } .pack-seal.play .ps-seal { animation: ps-stamp .5s 1.4s cubic-bezier(.3,1.6,.5,1) forwards; } .pack-seal.play .ps-ring { animation: ps-ripple .8s 1.55s ease-out both; transform-origin: center; } @keyframes ps-pop { from { transform: translateY(-10px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ps-draw { to { stroke-dashoffset: 0; } } @keyframes ps-stamp { 0% { opacity: 0; transform: translate(110px,60px) scale(2.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: translate(110px,92px) scale(1); } } @keyframes ps-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pack-seal .ps-twine path { stroke-dashoffset: 0; animation: none; } .pack-seal .ps-seal { opacity: 1; transform: translate(110px,92px); animation: none !important; } } /* Baskı zaman çizgisi: kapaklı */ .vx-timeline li { flex-basis: 132px; min-width: 132px; padding-top: 22px; } .vx-timeline .vt-cover { display: block; width: 54px; margin: 6px auto 8px; border-radius: 1px 3px 3px 1px; box-shadow: 0 3px 8px rgba(43,26,15,.3); overflow: hidden; transition: transform .2s; } .vx-timeline .vt-cover img { display: block; width: 54px; height: 78px; object-fit: cover; } .vx-timeline a:hover .vt-cover { transform: translateY(-4px) rotate(-2deg); } .vx-timeline li.is-current .vt-cover { box-shadow: 0 0 0 2px var(--accent), 0 5px 12px rgba(43,26,15,.35); } .vx-timeline a span:not(.vt-cover) { display: block; } /* Özel günler */ html[data-season="onkasim"] .hero { filter: grayscale(.85); box-shadow: inset 0 0 160px rgba(0,0,0,.4); } html[data-season="onkasim"] .season-greet { background: #2b2b2b; border-color: rgba(255,255,255,.4); } html[data-season="onkasim"] .hero::after { opacity: 0; } /* ===== Paket 20: erişilebilirlik (kontrast, koyu tema) ===== */ a:hover, ul.plain a, .filters li a.on, .btn.ghost, .filter-toggle { color: var(--accent-ink); } .btn.ghost:hover:not([disabled]) { color: var(--accent-ink); } .pagination .on, .view-toggle button[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent-fill); } .tabs a.on { background: var(--ink); color: var(--paper); } .hdr-link .lbl { color: color-mix(in srgb, var(--c) 55%, var(--ink)); } .hdr-link:hover .lbl { color: color-mix(in srgb, var(--c) 70%, var(--ink)); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tabbar a.on, .tabbar a.on span { color: var(--accent-ink); } .linkbtn { color: var(--accent-ink); } .side-nav a.setup-todo.on { color: #fff; } .side-nav .side-nav-group:nth-of-type(n+5) ~ a, .side-nav .side-nav-group:nth-of-type(n+5) { --c: var(--rust); --c2: var(--rust-2); } .admin-tab { color: color-mix(in srgb, var(--t) 62%, var(--ink)); } .admin-tab:hover { color: color-mix(in srgb, var(--t) 80%, var(--ink)); } .admin-tab.on { background: color-mix(in srgb, var(--t) 78%, #000); border-color: color-mix(in srgb, var(--t) 78%, #000); color: #fff; } .side-nav .side-nav-group:nth-of-type(n+5) { --c2: color-mix(in srgb, var(--rust-2) 65%, var(--ink)); } /* Mobilde üst şerit tek satır: bağlantılar yatay kayar, bayraklar aynı satırda */ @media (max-width: 640px) { .topbar .wrap > span:first-child { display: none; } .topbar .wrap { padding-top: 4px; padding-bottom: 4px; } .topbar nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; } .topbar nav::-webkit-scrollbar { display: none; } .topbar nav > a { white-space: nowrap; flex: none; } .topbar nav .lang-switch { flex: none; margin-left: auto; } } @media (max-width: 640px) { .topbar { font-size: .74rem; } .topbar nav { gap: 4px; } .topbar nav > a { padding: 2px 7px; } .topbar .lang-flag svg { width: 22px; height: 15px; } } .badge-item { opacity: .78; } .badge-item.earned { opacity: 1; } .badge-item:not(.earned) b, .badge-item:not(.earned) small { color: var(--ink-2); } form[action$="/sil"] .linkbtn, .linkbtn.danger { color: var(--danger-ink); } .btn.ghost.plum { color: var(--plum-2); } .badge-item { opacity: .88; } .badge-item b, .badge-item:not(.earned) b, .badge-item:not(.earned) small { color: var(--ink); } .seg label:has(input:checked) { background: var(--accent-fill); color: #fff; } /* Paket 21 — Hicrî/Rumî yıl çipi */ .year-cal{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0} .yc-chip{display:inline-flex;gap:6px;align-items:baseline;padding:3px 11px;border:1px solid color-mix(in srgb,var(--gold,#b8892b) 55%,transparent);border-radius:99px;background:color-mix(in srgb,var(--gold,#b8892b) 10%,transparent);font:600 13px var(--serif);color:var(--ink);font-variant-numeric:lining-nums} .yc-chip b{font-weight:700;color:var(--accent-ink,var(--accent));font-size:12px} /* Paket 21 — tezhipli nadir eser: altın cetvel + köşe palmetleri (yalnız is_rare) */ .tezhip{--tz:#b8892b;position:relative;border:1px solid var(--tz)!important;box-shadow:inset 0 0 0 4px var(--card,#fffdf6),inset 0 0 0 5px color-mix(in srgb,var(--tz) 70%,transparent),var(--shadow)} .tezhip::before,.tezhip>.tz-c{content:"";position:absolute;width:34px;height:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23b8892b' stroke-width='1.4'%3E%3Cpath d='M2 38V10Q2 2 10 2h28'/%3E%3Cpath d='M7 38V14Q7 7 14 7h24' stroke-width='.8'/%3E%3Cpath d='M12 12q9 0 9 9-9 0-9-9zM12 12q0 12 12 12' /%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23b8892b'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none;z-index:2;top:3px;left:3px} .tezhip::before{box-shadow:none} :root[data-theme="dark"] .tezhip{--tz:#d4a846} @media (max-width:560px){.tezhip::before{width:26px;height:26px}} /* Paket 21 — Yüzyıllar rafı: çağa göre sırt dokusu */ .century{margin:26px 0 34px} .century h2{font:700 1.25rem var(--serif);margin:0 0 10px} .century h2 small{font:500 .8rem var(--text);color:var(--muted);margin-left:8px} .cn-spine{--sp-bg:hsl(var(--sp-hue) 38% 28%);--sp-fg:#f1dfb8;background:var(--sp-bg);color:var(--sp-fg)} .c-old .cn-spine{--sp-bg:hsl(var(--sp-hue) 22% 24%);background-image:repeating-linear-gradient(0deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px)} .c-mid .cn-spine{--sp-bg:hsl(calc(var(--sp-hue)*.2 + 8) 52% 26%)} .c-tan .cn-spine{--sp-bg:hsl(var(--sp-hue) 34% 30%);border-left:2px solid rgba(255,255,255,.1)} .c-mod .cn-spine{--sp-bg:hsl(var(--sp-hue) 46% 31%);--sp-fg:#fffaf0} .cn-spine.rare{box-shadow:inset -2px 0 3px rgba(0,0,0,.28),inset 0 0 0 1.5px #d4a846} /* Sayfa çevirme penceresi koyu zemin: gündüz temasında da düğmeler okunur (önceki/sonraki/kapat) */ /* Paket 23 — kargo takip kutusu */ .track-box{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0} .live-track{margin:10px 0;padding:10px 14px;border-left:3px solid var(--green-solid,#1f7a4f);background:color-mix(in srgb,var(--green-solid,#1f7a4f) 8%,transparent);border-radius:0 4px 4px 0} .live-track .lt-status{margin:0 0 4px;font-weight:700} .lt-events{margin:6px 0;padding-left:18px;font-size:.88rem} .track-box{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center} .track-box .btn{margin:0;white-space:nowrap} .track-box .small{flex-basis:100%;margin:0} /* Paket 28 — ilanda kargo firması rozetleri */ .carrier-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0} .cb-lbl{font-size:.8rem;color:var(--muted)} .cb-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--line-2);border-radius:99px;background:var(--card);font-size:.8rem;font-weight:600;color:var(--ink)} .cb-chip svg{color:var(--blue-2,#235a93)} .cb-chip img{display:block;object-fit:contain} .cb-chip.has-logo{padding:3px 9px} .cb-chip img{height:24px;max-width:96px;width:auto} /* Logolar renkli; zemin kâğıt tonunda krem (koyu temada da okunur, beyaz gibi sırıtmaz) */ .cb-chip.has-logo{background:#f6ecd2;border-color:#d9c7a0;box-shadow:0 1px 0 rgba(60,40,20,.08)} .track-embed{margin:8px 0} .track-embed summary{cursor:pointer;font-weight:600;font-size:.9rem} .track-embed iframe{width:100%;height:420px;border:1px solid var(--line-2);border-radius:4px;background:#fff} .track-embed .track-no{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0} .track-embed .track-no strong{font-size:1.05rem;letter-spacing:.03em;user-select:all} /* ── Çıkış yap düğmesi: kapıdan çıkan ok; üzerine gelince dolar ── */ .side-nav .logout-form { padding: 14px 16px 16px; } .logout-btn { --lc: var(--danger-ink, var(--danger)); display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 18px; border-radius: 999px; cursor: pointer; font: 700 .95rem var(--text, inherit); color: var(--lc); background: color-mix(in srgb, var(--lc) 7%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--lc) 45%, transparent); transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; } .logout-btn svg { width: 20px; height: 20px; flex: none; } .logout-btn .lo-arrow { transition: transform .25s cubic-bezier(.3, .1, .2, 1); } .logout-btn:hover, .logout-btn:focus-visible { background: var(--lc); color: var(--lo-on, #fff); border-color: var(--lc); box-shadow: 0 6px 16px color-mix(in srgb, var(--lc) 35%, transparent); transform: translateY(-1px); } .logout-btn:hover .lo-arrow, .logout-btn:focus-visible .lo-arrow { transform: translateX(3px); } .logout-btn:active { transform: none; box-shadow: none; } .logout-btn:focus-visible { outline: 2px solid var(--lc); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .logout-btn, .logout-btn .lo-arrow { transition: none; } } :root[data-theme="dark"] .logout-btn { --lo-on: #2a1410; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logout-btn { --lo-on: #2a1410; } } /* ── Simetri: uzun yazar/başlık kartı genişletmesin (nowrap metin flex öğesinin en küçük genişliğini büyütüyordu) ── */ .shelf-row .shelf-track > *, .card, .card-body, .card-author, .card-shop { min-width: 0; max-width: 100%; } /* ══ Paket 42: davet kartı, kitap duruşu ══ */ .invite-card { border-style: dashed; background: color-mix(in srgb, var(--paper-2, var(--card)) 60%, var(--card)); justify-content: center; } .invite-card:hover { transform: none; box-shadow: none; } .invite-art { padding: 22px 18px 4px; color: var(--muted); } .invite-art .empty-art { width: 100%; max-width: 150px; margin: 0 auto; display: block; } .invite-card .card-title { min-height: 0; } .invite-card .btn { margin-top: 6px; } /* Kitabın elde hali: üzerine gelince kapak cilt tarafından hafifçe döner; fotoğraflara ince kağıt kenarı */ .card .card-cover img { transform-origin: left center; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; } .card:hover .card-cover img { transform: perspective(700px) rotateY(-9deg); } .card .card-cover img[src*="/uploads/"] { outline: 1px solid rgba(110, 80, 40, .3); outline-offset: -1px; filter: sepia(.05) saturate(.96); } @media (hover: none), (prefers-reduced-motion: reduce) { .card:hover .card-cover img { transform: none; } } /* Sahaf sayfası mobilde kısa: raf ve mühür küçülür, mühür adın yanına geçer */ @media (max-width: 640px) { .shop-cover { min-height: 120px; margin-top: 12px; } .shop-cover .vx-shelf-row { padding-top: 14px; transform-origin: bottom left; zoom: .82; } .shop-head { grid-template-columns: 64px 1fr; text-align: left; justify-items: stretch; align-items: start; gap: 14px; padding: 16px; margin: 14px 0; } .shop-head .shop-seal { width: 64px; height: 64px; font-size: 1.6rem; } .shop-head .shop-stats { grid-column: 1 / -1; justify-content: space-around; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .shop-head .shop-stats strong { font-size: 1.3rem; } } /* Ücretsiz kargo eşiği rozeti */ .fs-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:#e8f6ec;color:#16703a;border:1px solid #b9e2c6;font-size:.78rem;font-weight:600;line-height:1.5;white-space:nowrap;vertical-align:middle} .fs-chip svg{flex:none} .fs-chip.short{display:flex;width:fit-content;max-width:100%;margin:4px 0 0;font-size:.72rem;padding:1px 8px;overflow:hidden;text-overflow:ellipsis} :root[data-theme="dark"] .fs-chip{background:#14301e;color:#7fd6a0;border-color:#24523a} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fs-chip{background:#14301e;color:#7fd6a0;border-color:#24523a}} /* ===== Paket 47 — göz alıcı küçük hareketler (hepsi hareket azaltma tercihine saygılı) ===== */ /* 1) Raflar: sırtlar ekrana gelince tek tek yerine oturur (JS .shelf-wait / .shelf-in ekler, bitince kaldırır) */ @media (prefers-reduced-motion: no-preference) { .shelf-wait .spine { opacity: 0; transform: translateY(38px) rotate(3deg); } .shelf-in .spine { opacity: 1; transform: none; transition: opacity .45s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .9, .3, 1.25) var(--d, 0ms); } } /* 2) Nadir eser: balmumu mührün üstünden ara ara ışık geçer; kart altın çerçeve alır */ @media (prefers-reduced-motion: no-preference) { .badge.rare { overflow: hidden; } .badge.rare::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 244, 205, .75), transparent); transform: skewX(-18deg) translateX(0); animation: rare-sheen 6.5s ease-in-out 1.2s infinite; } .card:nth-child(3n) .badge.rare::after { animation-delay: 2.6s; } .card:nth-child(3n+1) .badge.rare::after { animation-delay: 4.1s; } } @keyframes rare-sheen { 0%, 70% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(520%); } } .card:has(.badge.rare):hover { border-color: #c9a24a; box-shadow: 0 0 0 1px rgba(201, 162, 74, .6), 0 12px 32px rgba(180, 135, 40, .28); } /* 3) Ana sayfa girişindeki kapaklar: yavaş süzülür, imleçle (ya da telefon eğimiyle) hafifçe kayar */ .ss-hero .hero-shelf a { translate: calc(var(--px, 0) * var(--dp, 10) * 1px) calc(var(--py, 0) * var(--dp, 10) * .6px); rotate: calc(var(--px, 0) * 1.6deg); } .ss-hero .hero-shelf a:nth-child(2) { --dp: 20; } .ss-hero .hero-shelf a:nth-child(3) { --dp: 7; } @media (prefers-reduced-motion: no-preference) { .ss-hero .hero-shelf a { transition: translate .35s ease-out, rotate .35s ease-out, transform .25s; } .ss-hero .hero-shelf img { animation: hero-float 7s ease-in-out infinite; } .ss-hero .hero-shelf a:nth-child(2) img { animation-delay: -2.3s; animation-duration: 8.4s; } .ss-hero .hero-shelf a:nth-child(3) img { animation-delay: -4.6s; animation-duration: 7.6s; } } @keyframes hero-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } .hero-stats strong { font-variant-numeric: tabular-nums; } /* 4) Mühür damgası: sipariş durumu güncellenince bildirimin yanına basılır */ .stamp-pop { position: absolute; right: 14px; top: 50%; width: 54px; height: 54px; margin-top: -27px; pointer-events: none; transform: rotate(-12deg); } .flash.has-stamp { position: relative; padding-right: 84px; } @media (prefers-reduced-motion: no-preference) { .stamp-pop { animation: stamp-in .55s cubic-bezier(.2, 1.4, .4, 1) .15s both; } .flash.has-stamp { animation: stamp-shake .35s ease .6s; } } @keyframes stamp-in { 0% { opacity: 0; transform: rotate(-30deg) scale(2.6); } 70% { opacity: 1; transform: rotate(-10deg) scale(.92); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } } @keyframes stamp-shake { 0%, 100% { transform: none; } 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } } /* 5) Favoriye ekle: sayfa ayracı yukarıdan düşer */ .bm-drop { position: fixed; z-index: 2000; width: 26px; height: 64px; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(40, 10, 5, .35)); } .bm-drop svg { display: block; width: 100%; height: 100%; } /* 6) "Yeni geldi" kurdelesi (ilk 48 saat) */ .ribbon-new { position: absolute; top: 12px; right: -1px; z-index: 3; padding: 3px 11px 3px 18px; font: 700 .72rem/1.2 var(--serif, Georgia, serif); letter-spacing: .03em; color: #3a2509; background: linear-gradient(90deg, #cfa64a, #ecd08a); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); filter: drop-shadow(0 2px 2px rgba(60, 40, 10, .3)); pointer-events: none; } /* 8) Sayfa geçişleri: yumuşak çapraz solma (üst bar ve alt sekme yerinde kalır) */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } .header { view-transition-name: site-header; } .tabbar { view-transition-name: site-tabbar; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; } } /* 9) Masaüstü büyüteç */ .zoom-lens { position: fixed; z-index: 1500; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s; border: 3px solid #d9b26a; box-shadow: 0 10px 30px rgba(30, 15, 5, .45), inset 0 0 0 2px rgba(255, 255, 255, .5); background-repeat: no-repeat; background-color: #efe6d3; } .zoom-lens.on { opacity: 1; } .book-gallery .gallery-main[data-lens] { cursor: zoom-in; } /* 10) Sahaflar sayfası: mağazanın birkaç kitap sırtı */ .seller-card { align-items: stretch; } .seller-mini { display: flex; align-items: flex-end; gap: 2px; margin-top: 10px; padding: 0 6px; border-bottom: 5px solid #7a4d1e; min-height: 20px; } .mini-spine { display: block; flex: none; border-radius: 2px 2px 0 0; box-shadow: inset -2px 0 3px rgba(0, 0, 0, .25); position: relative; } .mini-spine::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: currentColor; opacity: .5; } @media (prefers-reduced-motion: no-preference) { .seller-card .mini-spine { transition: transform .2s; } .seller-card:hover .mini-spine { transform: translateY(-4px); } .seller-card:hover .mini-spine:nth-child(2n) { transform: translateY(-7px); } } @media print { .shelf-wait .spine { opacity: 1 !important; transform: none !important; } .ribbon-new, .zoom-lens { display: none !important; } } /* ===== Paket 48 — sepet, mektup, iskelet, kategori süsü, defter yorumları ===== */ /* Ücretsiz kargo yolu */ .fs-road { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; margin: 8px 0 2px; flex: 0 0 100%; width: 100%; max-width: 520px; } .fs-lane { position: relative; grid-column: 1; padding-top: 24px; } .fs-track { position: relative; height: 8px; border-radius: 99px; background: repeating-linear-gradient(90deg, #d9cbb0 0 10px, transparent 10px 16px); } .fs-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 99px; background: linear-gradient(90deg, #c9a24a, #a8241a); } .fs-truck { position: absolute; top: 0; left: calc(var(--p) * (100% - 38px)); width: 38px; height: 22px; } .fs-goal { grid-column: 2; grid-row: 2; font: 700 .82rem var(--serif, Georgia, serif); color: var(--ink-2); } .fs-msg { grid-column: 1; grid-row: 2; font-size: .84rem; color: var(--ink-2); } .fs-road.done .fs-fill { background: linear-gradient(90deg, #4aa56a, #1f8a54); } .fs-road.done .fs-msg { color: #16703a; font-weight: 600; } .fs-road.done .fs-goal { color: #16703a; } @media (prefers-reduced-motion: no-preference) { .fs-fill { animation: fs-fill 1.1s cubic-bezier(.2, .8, .2, 1) .15s both; } .fs-truck { animation: fs-drive 1.1s cubic-bezier(.2, .8, .2, 1) .15s both; } } @keyframes fs-fill { from { width: 0; } } @keyframes fs-drive { from { left: 0; } } /* Koli */ .cart-group-head { position: relative; } .cart-box { position: absolute; right: 10px; bottom: 8px; width: 118px; height: 72px; } .cart-box .cb-books { position: absolute; left: 10px; right: 10px; bottom: 12px; display: flex; align-items: flex-end; gap: 1px; justify-content: center; } .cb-spine { display: block; border-radius: 2px 2px 0 0; box-shadow: inset -2px 0 2px rgba(0, 0, 0, .25); } .cb-front { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: linear-gradient(#d2ac76, #b98f58); border: 1px solid #9a7447; border-radius: 0 0 4px 4px; } .cb-front::before { content: ""; position: absolute; left: 50%; top: 0; width: 22px; height: 10px; margin-left: -11px; background: #efe3c8; opacity: .55; } @media (prefers-reduced-motion: no-preference) { .cb-spine { animation: cb-drop .5s cubic-bezier(.3, 1.4, .5, 1) calc(.2s + var(--i) * .07s) both; } } @keyframes cb-drop { from { transform: translateY(-46px); opacity: 0; } } @media (max-width: 760px) { .cart-box { display: none; } } /* Sepet sayısı zıplar */ @media (prefers-reduced-motion: no-preference) { .count.bump { animation: count-bump .5s cubic-bezier(.3, 1.6, .5, 1); } } @keyframes count-bump { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } } /* "Aradığınız kitap raflara geldi" mektubu */ .want-letter { position: relative; margin: 18px 0 8px; padding: 16px 52px 14px 18px; background: #fffaf0; border: 1px solid #d9c9a6; border-radius: 6px; box-shadow: 0 6px 18px rgba(80, 40, 20, .12); overflow: hidden; } .want-letter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(135deg, #a8241a 0 14px, #f6f0e3 14px 20px, #1f5fa8 20px 34px, #f6f0e3 34px 40px); } .wl-kicker { margin: 4px 0 8px; font: 700 1.1rem var(--serif, Georgia, serif); color: var(--accent-2, #7a1710); } .wl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .wl-list li { display: flex; align-items: center; gap: 12px; } .wl-cover img { display: block; width: 36px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; box-shadow: 0 3px 6px rgba(0, 0, 0, .25); } .wl-text { flex: 1; min-width: 0; } .wl-title { font: 700 1.05rem var(--serif, Georgia, serif); } .wl-close { position: absolute; right: 10px; top: 12px; border: 0; background: transparent; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; } .wl-seal { position: absolute; right: 44px; top: 8px; width: 34px; height: 34px; transform: rotate(10deg); opacity: .9; pointer-events: none; } @media (max-width: 640px) { .wl-list li { flex-wrap: wrap; } .wl-seal { display: none; } } @media (prefers-reduced-motion: no-preference) { .want-letter { animation: wl-in .6s cubic-bezier(.2, .9, .3, 1) both; } } @keyframes wl-in { from { opacity: 0; transform: translateY(-14px) rotate(-.6deg); } } /* Arama sonuçlarında kitap biçimli yükleme iskeleti */ .sk-loading .card { position: relative; overflow: hidden; pointer-events: none; } .sk-loading .card > * { visibility: hidden; } .sk-loading .card::before { content: ""; position: absolute; inset: 14px 14px 14px; border-radius: 4px; background: linear-gradient(#e6d9bd, #e6d9bd) 50% 0 / 62% 56% no-repeat, linear-gradient(#e6d9bd, #e6d9bd) 0 66% / 82% 12px no-repeat, linear-gradient(#e6d9bd, #e6d9bd) 0 76% / 54% 10px no-repeat, linear-gradient(#e6d9bd, #e6d9bd) 0 92% / 36% 14px no-repeat; } .sk-loading .card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); } @media (prefers-reduced-motion: no-preference) { .sk-loading .card::after { animation: sk-sweep 1.2s ease-in-out infinite; } } @keyframes sk-sweep { to { transform: translateX(100%); } } /* Kategori süsü */ .page-head { position: relative; } .cat-motif { position: absolute; right: 4px; top: -4px; color: #b8892b; opacity: .5; pointer-events: none; } @media (max-width: 640px) { .cat-motif { width: 64px; height: 64px; } } :root[data-theme="dark"] .cat-motif { color: #d4a846; opacity: .45; } /* Yorumlar defter sayfası gibi */ .reviews-layout .q-list { list-style: none; padding: 0; display: grid; gap: 14px; } .reviews-layout .q-list li { position: relative; padding: 12px 16px 12px 44px; background: #fffdf6 repeating-linear-gradient(transparent 0 26px, rgba(80, 120, 170, .22) 26px 27px); border: 1px solid #e3d6b8; border-radius: 3px; box-shadow: 0 2px 6px rgba(70, 45, 20, .1); line-height: 27px; } .reviews-layout .q-list li::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 1px; background: rgba(176, 52, 40, .45); } .reviews-layout .q-list li p { margin: 0 !important; line-height: 27px; font-family: var(--serif, Georgia, serif); } .reviews-layout .q-list li:nth-child(odd) { transform: rotate(-.35deg); } .reviews-layout .q-list li:nth-child(even) { transform: rotate(.3deg); } :root[data-theme="dark"] .reviews-layout .q-list li { background: #2a2118 repeating-linear-gradient(transparent 0 26px, rgba(150, 180, 220, .14) 26px 27px); border-color: #4a3d2a; } .exlibris-link { display: inline-block; margin-top: 4px; text-decoration: underline; } /* ---------- Paket 49 ---------- */ /* Barkod okut */ .scan-overlay { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(30, 20, 12, .72); padding: 16px; } .scan-card { position: relative; width: min(440px, 100%); background: var(--card, #fffdf6); color: var(--ink, #2b2019); border-radius: 8px; padding: 18px 18px 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .4); } .scan-card h2 { margin: 0 28px 10px 0; font: 700 1.2rem var(--serif, Georgia, serif); } .scan-x { position: absolute; right: 8px; top: 6px; border: 0; background: transparent; font-size: 1.7rem; line-height: 1; cursor: pointer; color: inherit; } .scan-view { position: relative; overflow: hidden; border-radius: 6px; background: #000; aspect-ratio: 4 / 3; } .scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; } .scan-line { position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: #e5483a; box-shadow: 0 0 10px #e5483a; } @media (prefers-reduced-motion: no-preference) { .scan-line { animation: scan-sweep 1.8s ease-in-out infinite alternate; } } @keyframes scan-sweep { from { top: 22%; } to { top: 78%; } } .scan-msg { margin: 10px 0; font-size: .92rem; } .scan-msg.bad { color: #a8241a; } .scan-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .scan-form label { flex: 1; min-width: 150px; font-size: .85rem; display: grid; gap: 4px; } .scan-form input { padding: 8px 10px; border: 1px solid var(--line, #cdbd9a); border-radius: 4px; font-size: 1rem; background: transparent; color: inherit; } /* Yazar / yayınevi sayfası */ .people-page .page-head h1 { font-family: var(--serif, Georgia, serif); } /* Paylaşılan istek listesi */ .wish-share { margin: 10px 0 16px; } .wish-share summary { cursor: pointer; font-weight: 700; } .wish-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; } .wish-form label { flex: 1; min-width: 200px; display: grid; gap: 4px; font-size: .85rem; } .wish-form input, .wish-link input { padding: 8px 10px; border: 1px solid var(--line, #cdbd9a); border-radius: 4px; background: transparent; color: inherit; font-size: .95rem; } .wish-link { display: flex; gap: 8px; margin: 8px 0; } .wish-link input { flex: 1; min-width: 0; } /* Fiyat çizgisi */ .price-spark { margin: 8px 0 12px; max-width: 420px; } .price-spark svg { width: 100%; height: auto; display: block; } .ps-line { fill: none; stroke: #a8241a; stroke-width: 2; stroke-linejoin: round; } .ps-dot { fill: var(--card, #fffdf6); stroke: #a8241a; stroke-width: 2; } .ps-t { font: 10px var(--sans, system-ui, sans-serif); fill: var(--muted, #7a6a55); } /* Kargo yolculuğu */ .ship-road { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; color: var(--muted, #7a6a55); } .sr-city { font: 700 .88rem var(--serif, Georgia, serif); color: var(--ink, #2b2019); white-space: nowrap; max-width: 28%; overflow: hidden; text-overflow: ellipsis; } .sr-lane { position: relative; flex: 1; height: 30px; } .sr-line { position: absolute; left: 0; right: 0; bottom: 2px; width: 100%; height: 8px; } .sr-truck { position: absolute; bottom: 4px; width: 38px; height: 22px; left: calc(var(--p) * (100% - 38px)); } @media (prefers-reduced-motion: no-preference) { .sr-truck { animation: sr-drive 1.2s cubic-bezier(.2, .8, .2, 1) .2s both; } } @keyframes sr-drive { from { left: 0; } } .sr-note { margin: 0 0 6px; } /* Kutuyu aç */ .unbox { text-align: center; padding: 6px 0 14px; margin-bottom: 8px; border-bottom: 1px dashed var(--line, #cdbd9a); } .unbox-box { position: relative; z-index: 1; width: 150px; height: 46px; margin: -30px auto 10px; } .ub-body { position: absolute; inset: 12px 0 0; background: #c8a064; border-radius: 3px; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12); } .ub-lid { position: absolute; left: -6px; right: -6px; top: 4px; height: 14px; background: #b48a50; border-radius: 3px; transform-origin: 0 100%; } @media (prefers-reduced-motion: no-preference) { .ub-lid { animation: ub-open 1s .25s cubic-bezier(.3, 1.4, .5, 1) both; } .ub-book { animation: ub-pop .7s calc(.6s + var(--i) * .12s) cubic-bezier(.2, 1.3, .4, 1) both; } } @keyframes ub-open { from { transform: none; } to { transform: translate(-4px, -6px) rotate(-16deg); } } @keyframes ub-pop { from { opacity: 0; transform: translateY(26px) scale(.7); } } .ub-lid { transform: translate(-4px, -6px) rotate(-16deg); } .unbox-books { position: relative; z-index: 3; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; } .ub-book img { display: block; width: 72px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; box-shadow: 0 5px 10px rgba(60, 40, 20, .3); } .unbox-msg { margin: 0; font-family: var(--serif, Georgia, serif); } /* Fotoğraf uyarısı */ .photo-nudge { border-left: 4px solid #b8892b; } /* Sahafın hikâyesi */ .shop-story { position: relative; margin: 12px 0 0; padding: 10px 16px 8px 18px; border-left: 3px solid #b8892b; background: color-mix(in srgb, var(--card, #fffdf6) 70%, transparent); max-width: 70ch; font-family: var(--serif, Georgia, serif); color: var(--ink-2, #4a3b2c); } .shop-story .ss-h { display: block; font: 700 .8rem var(--sans, system-ui, sans-serif); color: #8a6a1f; margin-bottom: 4px; } .shop-story p { margin: 0 0 8px; line-height: 1.6; } /* ---------- Paket 49b: barkod simgesi + düğme üzerine gelince yazı okunurluğu ---------- */ .search .scan-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex: 0 0 auto; padding: 0 10px; min-width: 52px; background: transparent; color: var(--ink-2); border: 0; border-left: 1px solid var(--line); text-transform: none; letter-spacing: 0; font: 700 .64rem/1 var(--text, system-ui, sans-serif); cursor: pointer; filter: none; } .search .scan-btn:hover, .search .scan-btn:focus-visible { background: color-mix(in srgb, var(--teal) 14%, var(--card)); color: var(--ink); filter: none; } .search .scan-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; } .scan-ico { display: block; } .scan-ray { transform-box: fill-box; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { .scan-btn .scan-ray { animation: scan-ray 1.9s ease-in-out infinite alternate; } } @keyframes scan-ray { from { transform: translateY(-5px); } to { transform: translateY(5px); } } .scan-form-btn { display: inline-flex; align-items: center; gap: 6px; } .scan-form-btn .scan-ico { width: 18px; height: 18px; } .catalog-isbn-row { flex-wrap: wrap; } @media (max-width: 640px) { .search .scan-btn { min-width: 44px; padding: 0 6px; } } /* Üzerine gelince yazı kaybolmasın: dolgu rengiyle yazı rengi aynı olabilen yerler koyu/açık temada okunur kalır */ .btn.ghost:hover:not([disabled]), .btn.ghost:focus-visible:not([disabled]) { background: color-mix(in srgb, var(--accent) 20%, var(--card)); color: var(--accent-ink); border-color: var(--accent); } .btn.ghost.blue:hover:not([disabled]), a.btn.ghost[download]:hover, a.btn.ghost[href$=".jpg"]:hover, a.btn.ghost[href$=".zip"]:hover, a.btn.ghost[href$=".csv"]:hover { background: color-mix(in srgb, var(--blue) 22%, var(--card)); color: var(--blue-2); border-color: var(--blue); } .btn.ghost.green:hover:not([disabled]), form[action$="/durum"] .btn.ghost:hover:not([disabled]) { background: color-mix(in srgb, var(--green) 22%, var(--card)); color: var(--green-2); border-color: var(--green); } .btn.ghost.teal:hover:not([disabled]) { background: color-mix(in srgb, var(--teal) 22%, var(--card)); color: var(--teal-2); border-color: var(--teal); } .btn.ghost.rust:hover:not([disabled]) { background: color-mix(in srgb, var(--rust) 22%, var(--card)); color: var(--rust-2); border-color: var(--rust); } .btn.ghost.plum:hover:not([disabled]) { background: color-mix(in srgb, var(--plum) 22%, var(--card)); color: var(--plum-2); border-color: var(--plum); } .btn.ghost.gold:hover:not([disabled]) { background: color-mix(in srgb, var(--gold) 24%, var(--card)); color: var(--gold-2); border-color: var(--gold); } form[action$="/sil"] .btn:hover:not([disabled]), form[action$="/kaldir"] .btn:hover:not([disabled]), form[action*="/iptal"] .btn.ghost:hover:not([disabled]), .btn.ghost.danger:hover:not([disabled]) { background: color-mix(in srgb, var(--danger) 22%, var(--card)); color: var(--danger); border-color: var(--danger); } form[action$="/sil"] .linkbtn:hover, form[action$="/kaldir"] .linkbtn:hover { background: color-mix(in srgb, var(--danger) 22%, var(--card)); color: var(--danger); } :root[data-theme="dark"] .btn.ghost.danger:hover:not([disabled]), :root[data-theme="dark"] form[action$="/sil"] .btn:hover:not([disabled]) { color: var(--danger-ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) form[action$="/sil"] .btn:hover:not([disabled]) { color: var(--danger-ink); } } /* Seçili (dolu) öğeler üzerine gelince aynı renkte yazıya dönüşmesin */ .side-nav a.on:hover, .side-nav a[href="/panel/ilan/yeni"].on:hover { color: #fff; filter: brightness(1.08); } .admin-tab.on:hover { background: var(--t); color: #fff; border-color: var(--t); filter: brightness(1.08); } .tabs a.on:hover, .pagination a.on:hover { color: var(--paper); } :root[data-theme="dark"] .tabs a.on:hover { color: var(--paper); } /* Paket 52: ana sayfa vitrini: krem çerçeve yerine kitabın kendi renklerinden bulanık zemin + ince altın kenar */ .ss-hero .hero-shelf a { position: relative; isolation: isolate; background: #1e1710; border: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(226, 190, 118, .55), inset 0 0 0 1px rgba(255, 240, 205, .08); } .ss-hero .hero-shelf a::before { content: ""; position: absolute; inset: -20%; z-index: -2; background: var(--bg) center / cover no-repeat; filter: blur(16px) saturate(1.35) brightness(.78); } .ss-hero .hero-shelf a::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 28%), radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 100%); } .ss-hero .hero-shelf img { position: relative; z-index: 0; padding: 0; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); } /* Paket 55: ana sayfa sahaf dükkânı sahnesi */ .hero-scene { align-self: center; justify-self: center; width: min(100%, 520px); filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .5)); } .hero-scene svg { display: block; width: 100%; height: auto; overflow: visible; } .hs-sign { cursor: pointer; } .hs-sign rect { transition: fill .2s; } .hs-sign:hover rect, .hs-sign:focus-visible rect { fill: #c9362a; } .hs-lamp, .hs-sign g, .hs-steam, .hs-lightcone, .cat-curl, .cat-walk, .hs-cbody, .hs-chead, .hs-paw, .hs-tail, .hs-ear, .hs-leg, .hs-wtail { transform-box: fill-box; } @media (prefers-reduced-motion: no-preference) { .hs-lightcone { animation: hs-flicker 5.5s ease-in-out infinite; } .hs-lamp { transform-origin: 50% 0; animation: hs-sway 7s ease-in-out infinite alternate; } .hs-sign g { transform-origin: 50% 0; animation: hs-sway 4.6s ease-in-out infinite alternate; } .hs-steam { opacity: 0; animation: hs-steam 3.6s ease-in-out infinite; } .hs-steam.s2 { animation-delay: 1.5s; } } @keyframes hs-flicker { 0%, 100% { opacity: .95; } 41% { opacity: .82; } 46% { opacity: .97; } 71% { opacity: .88; } } @keyframes hs-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } } @keyframes hs-steam { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .75; } 100% { opacity: 0; transform: translateY(-14px); } } @keyframes hs-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.045); } } @media (max-width: 860px) { .hero-scene { display: none; } } /* Kedi (48 sn): sağda uyur → gerinir → yavaşça yürüyüp çay bardağının yanında durur, bakınır → kitaba zıplar, kıvrılıp uyur → gerinir → inip döner */ .cat-walk, .cat-stand { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .hs-cat { animation: cat-route 48s ease-in-out infinite; } .cat-curl { transform-origin: 50% 100%; animation: cat-show-curl 48s steps(1, end) infinite, hs-breathe 4.2s ease-in-out infinite; } .cat-walk { animation: cat-show-walk 48s steps(1, end) infinite, cat-face 48s steps(1, end) infinite; } .cat-stand { animation: cat-show-stand 48s steps(1, end) infinite; } .hs-cbody { transform-origin: 100% 100%; animation: cat-body 48s ease-in-out infinite; } .hs-chead { transform-origin: 85% 90%; animation: cat-head 48s ease-in-out infinite; } .hs-paw { opacity: 0; transform-origin: 100% 50%; animation: cat-paw 48s ease-in-out infinite; } .hs-paw.p2 { animation-delay: .12s; } .hs-tail { transform-origin: 0% 100%; animation: cat-tail 3.8s ease-in-out infinite alternate; } .cat-walk .hs-wtail { transform-origin: 0% 100%; animation: cat-tail 1.6s ease-in-out infinite alternate; } .cat-stand .hs-wtail { transform-origin: 0% 100%; animation: cat-tail 2.8s ease-in-out infinite alternate; } .hs-ear { transform-origin: 50% 100%; animation: cat-ear 7s ease-in-out infinite; } .cat-walk .hs-leg { transform-origin: 50% 0; animation: cat-step .8s ease-in-out infinite alternate; } .cat-walk .hs-leg.b, .cat-walk .hs-leg.c { animation-direction: alternate-reverse; } .cat-walk .hs-wbody { animation: cat-bob .8s ease-in-out infinite alternate; } .cat-stand .hs-shead { transform-origin: 70% 80%; animation: cat-look 48s ease-in-out infinite; } } .hs-leg, .hs-shead, .hs-wtail { transform-box: fill-box; } @keyframes cat-route { 0%, 35% { translate: 0 0; } 36.5% { translate: 0 14px; } 44%, 56% { translate: -100px 14px; } 66% { translate: -200px 14px; } 66.8% { translate: -200px -22px; } 68%, 89% { translate: -200px -8px; } 89.7% { translate: -200px -22px; } 90.5% { translate: -200px 14px; } 99% { translate: 0 14px; } 99.8%, 100% { translate: 0 0; } } @keyframes cat-show-curl { 0% { opacity: 1; } 35% { opacity: 0; } 68% { opacity: 1; } 89% { opacity: 0; } 99.5% { opacity: 1; } } @keyframes cat-show-walk { 0% { opacity: 0; } 35% { opacity: 1; } 44% { opacity: 0; } 56% { opacity: 1; } 68% { opacity: 0; } 89% { opacity: 1; } 99.5% { opacity: 0; } } @keyframes cat-show-stand { 0% { opacity: 0; } 44% { opacity: 1; } 56% { opacity: 0; } } @keyframes cat-face { 0% { scale: 1 1; } 90% { scale: -1 1; } } @keyframes cat-body { 0%, 26%, 34%, 84%, 88.8%, 100% { transform: none; } 28%, 32%, 85.5%, 87.3% { transform: scaleX(1.13) rotate(-3deg); } } @keyframes cat-head { 0%, 26%, 34%, 84%, 88.8%, 100% { transform: none; } 28%, 32%, 85.5%, 87.3% { transform: translate(-10px, 7px) rotate(-16deg); } } @keyframes cat-paw { 0%, 26%, 34%, 84%, 88.8%, 100% { opacity: 0; transform: translateX(0) scaleX(.4); } 28%, 32%, 85.5%, 87.3% { opacity: 1; transform: translateX(-13px) scaleX(1.25); } } /* durup bakınma: yukarı (buhara) bak, aşağı kokla, arkasına (bardağa) dön, tekrar önüne bak */ @keyframes cat-look { 0%, 44%, 55%, 100% { transform: none; } 46% { transform: rotate(16deg); } 48% { transform: rotate(16deg); } 49.5% { transform: rotate(-8deg) translateY(2px); } 51% { transform: rotate(-8deg) translateY(2px); } 52% { transform: scaleX(-1) rotate(4deg); } 53.4% { transform: scaleX(-1) rotate(4deg); } 54.6% { transform: none; } } @keyframes cat-tail { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } } @keyframes cat-ear { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-12deg); } 94% { transform: rotate(4deg); } } @keyframes cat-step { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } } @keyframes cat-bob { from { transform: translateY(0); } to { transform: translateY(-1.6px); } } /* ===== Paket 59: mevsim/gece sahnesi, kedi boş durumları, Instagram vitrini, güven rozetleri, takım tamamlama ===== */ .hs-night { display: none; } :root[data-theme="dark"] .hs-night { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hs-night { display: inline; } } :root[data-theme="dark"] .hs-lightcone { opacity: 1; filter: brightness(1.25); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hs-lightcone { opacity: 1; filter: brightness(1.25); } } .hs-cat[data-cat] { cursor: pointer; outline: none; } .hs-cat[data-cat]:focus-visible { outline: 2px solid var(--teal, #2c7a7a); outline-offset: 4px; } .hs-fall .hs-leaf, .hs-fall .hs-flake { transform-box: fill-box; } @media (prefers-reduced-motion: no-preference) { .hs-star { animation: hs-twinkle 3.6s ease-in-out infinite; } .hs-leaf { animation: hs-leaf 10s linear infinite; opacity: 0; } .hs-flake { animation: hs-flake 9s linear infinite; opacity: 0; } .hs-bulb { animation: hs-twinkle 2.4s ease-in-out infinite; } .hs-flag { transform-origin: 52px 6px; animation: hs-sway 3.2s ease-in-out infinite alternate; } .hs-fener { transform-origin: 120px 28px; animation: hs-sway 5s ease-in-out infinite alternate; } .ca-peek { animation: ca-peek 5s ease-in-out infinite; transform-box: fill-box; } .ca-z text { animation: ca-z 3.4s ease-in-out infinite; } .ca-z text:nth-child(2) { animation-delay: .5s; } .ca-z text:nth-child(3) { animation-delay: 1s; } } @keyframes hs-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes hs-leaf { 0% { opacity: 0; translate: 0 0; rotate: 0deg; } 10% { opacity: .95; } 50% { translate: 18px 150px; rotate: 160deg; } 90% { opacity: .95; } 100% { opacity: 0; translate: -14px 300px; rotate: 320deg; } } @keyframes hs-flake { 0% { opacity: 0; translate: 0 0; } 10% { opacity: .9; } 50% { translate: 10px 150px; } 100% { opacity: 0; translate: -8px 300px; } } @keyframes ca-peek { 0%, 70%, 100% { translate: 0 0; } 78%, 90% { translate: 0 -5px; } } @keyframes ca-z { 0%, 100% { opacity: .15; translate: 0 2px; } 50% { opacity: .8; translate: 0 -3px; } } .cat-art { display: block; width: 190px; max-width: 70%; height: auto; margin: 0 auto 10px; color: var(--muted, #8a7a66); cursor: pointer; } .cat-art:hover { filter: brightness(1.06); } .cat-heart { position: fixed; z-index: 90; color: #d9534f; font-size: 20px; pointer-events: none; transform: translate(-50%, 0); animation: cat-heart 2s ease-out forwards; } @keyframes cat-heart { 0% { opacity: 0; translate: 0 0; scale: .6; } 15% { opacity: 1; } 100% { opacity: 0; translate: 0 -70px; scale: 1.2; } } @media (prefers-reduced-motion: reduce) { .cat-heart { animation: none; opacity: 0; } } .inapp-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line, #d8c9ad); border-left: 4px solid var(--accent, #7b2d26); border-radius: 8px; background: var(--card, #fffaf0); font-size: .92rem; } .inapp-notice span { flex: 1 1 260px; color: var(--ink-2, #5a4a3a); } .trust-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; } .trust-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: .78rem; color: var(--teal-ink, #1f5c5c); background: color-mix(in srgb, var(--teal, #2c7a7a) 13%, var(--card, #fff)); border: 1px solid color-mix(in srgb, var(--teal, #2c7a7a) 35%, transparent); white-space: nowrap; } .set-complete { margin-top: 18px; } .set-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .set-list a { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line, #d8c9ad); border-radius: 8px; background: var(--card, #fff); color: inherit; text-decoration: none; } .set-list a:hover { border-color: var(--accent, #7b2d26); } .set-list img { width: 48px; height: 64px; object-fit: cover; border-radius: 3px; flex: none; } .ig-page .ig-head { text-align: center; padding: 18px 0 8px; } .ig-page .ig-head h1 { margin: 0 0 6px; } .ig-search { display: flex; gap: 8px; max-width: 520px; margin: 14px auto 0; } .ig-search input { flex: 1; min-width: 0; } .ig-search .scan-btn { display: inline-flex; align-items: center; gap: 6px; } .ig-search .scan-ico { width: 22px; height: 22px; } .ig-foot { text-align: center; margin: 26px 0; } @media (max-width: 480px) { .ig-search .scan-btn span { display: none; } } /* ── v81: sipariş çizelgesi kapanış notu, kargo takip bağlantısı ── */ .order-closed { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent, #a8241a); background: var(--card-2, rgba(168, 36, 26, .06)); border-radius: 0 4px 4px 0; color: var(--ink-2, #5a4a3c); } .order-tl li > a { display: inline-block; margin-top: 2px; color: var(--accent, #a8241a); } /* ── v100: alt bar kaydırma, sayfa geçiş çubuğu, kapak parıltısı ── */ @media (max-width: 760px) { .tabbar { transition: transform .25s ease; } .tabbar.tabbar-hide { transform: translateY(100%); } } .nav-progress { position: fixed; z-index: 2000; top: 0; left: 0; height: 3px; width: 0; background: var(--accent, #a8241a); pointer-events: none; opacity: 0; } .nav-progress.run { opacity: 1; width: 82%; transition: width 6s cubic-bezier(.1, .7, .2, 1); } .nav-progress.done { opacity: 0; width: 100%; transition: width .2s, opacity .4s .2s; } .img-wait { position: relative; background: linear-gradient(100deg, #eadfc4 30%, #f6eed9 50%, #eadfc4 70%); background-size: 200% 100%; } @media (prefers-reduced-motion: no-preference) { .img-wait { animation: img-wait 1.2s linear infinite; } .tabbar .count.bump { animation: cnt-bump .35s; } } @keyframes img-wait { to { background-position: -200% 0; } } @keyframes cnt-bump { 40% { transform: scale(1.35); } } @media (prefers-reduced-motion: no-preference) { .wo-mute.wo-ask { animation: wo-ask 1.1s ease-in-out 3; } } @keyframes wo-ask { 50% { box-shadow: 0 0 0 9px rgba(168, 36, 26, .16); } } /* Filtre grupları */ .filters { max-height: none; overflow: visible; } .filters .f-group { border-top: 1px solid var(--line, #d9ccaa); padding: 4px 0; } .filters .f-group:first-of-type { border-top: 0; } .filters .f-group > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 10px 0 8px; font: 700 var(--fs-2, .78rem) var(--text); text-transform: uppercase; letter-spacing: .12em; color: var(--muted, #796f62); } .filters .f-group > summary::-webkit-details-marker { display: none; } .filters .f-group > summary::after { content: "+"; font-size: 1.1rem; line-height: 1; color: var(--accent, #a8241a); } .filters .f-group[open] > summary::after { content: "–"; } .filters .f-group[open] { padding-bottom: 10px; } .filters ul { max-height: none; overflow: visible; } /* Duyuru şeridi: bordo zemin, dönen mesajlar */ .topbar { background: linear-gradient(90deg, #6e1a13, #a8241a 50%, #6e1a13); color: #fbe9c4; } .topbar .topbar-msgs { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .topbar .tb-track { display: inline-flex; width: max-content; } .topbar .tb-set { display: inline-flex; align-items: center; } .topbar .tb-set .tb-m { font-weight: 600; letter-spacing: .01em; } .topbar .tb-set i { font-style: normal; font-size: .6rem; color: #e8c06a; margin: 0 22px; } @media (prefers-reduced-motion: no-preference) { .topbar .tb-track { animation: tb-run 38s linear infinite; } .topbar .topbar-msgs:hover .tb-track { animation-play-state: paused; } } @keyframes tb-run { to { transform: translateX(-50%); } } @media (max-width: 800px) { .topbar .wrap { flex-wrap: wrap; } .topbar .topbar-msgs { order: -1; flex: 1 0 100%; padding: 3px 0 1px; } } /* ===== v107: sahne canlandı: canlı tabela, tezgâhta yeni kitaplar, kapı zili + yeni sahaf, kargo güvercini, yağmur, kedi ve çay ===== */ .hs-tick, .hs-books a, .hs-bubble { cursor: pointer; } .hs-tick text.hs-tt { opacity: 0; } .hs-tick text.hs-tt:first-of-type { opacity: 1; } .hs-bkw { transition: translate .2s ease; } .hs-books a:hover .hs-bkw, .hs-books a:focus-visible .hs-bkw { translate: 0 -8px; } .hs-bell, .hs-visitor, .hs-bird, .hs-rain, .hs-teapaw, .hs-drops { opacity: 0; } .hs-bell, .hs-wing, .hs-teapaw, .hs-tea, .hs-glass, .hs-drip { transform-box: fill-box; } @media (prefers-reduced-motion: no-preference) { .hs-tick.n2 text.hs-tt { animation: hs-tt2 8s linear infinite; } .hs-tick.n3 text.hs-tt { animation: hs-tt3 12s linear infinite; } .hs-bell { opacity: 1; transform-origin: 50% 0; animation: hs-ring 40s ease-in-out 7s infinite; } .hs-visitor { animation: hs-visit 40s ease-in-out 7s infinite; } .hs-bubble { opacity: 0; animation: hs-bubble 40s ease-in-out 7s infinite; } .hs-vbob { animation: hs-vbob .5s ease-in-out infinite alternate; } .hs-bird { animation: hs-bird 52s linear 12s infinite; } .hs-bbob { animation: hs-bbob .8s ease-in-out infinite alternate; } .hs-wing { transform-origin: 100% 100%; animation: hs-flap .22s ease-in-out infinite alternate; } .hs-rain { animation: hs-shower 80s ease-in-out -14s infinite; } .hs-wet { opacity: .2; } .hs-drip { animation: hs-drip 1s linear infinite; opacity: 0; } .hs-glass { animation: hs-slide 7s ease-in infinite; } .hs-tea { transform-origin: 50% 100%; animation: tea-wob 48s linear infinite; } .hs-teapaw { animation: tea-paw 48s ease-in-out infinite; } .hs-drop { animation: tea-drop 48s ease-out infinite; } .hs-drop.d1 { --dx: 9px; } .hs-drop.d2 { --dx: -9px; animation-delay: .15s; } .hs-drop.d3 { --dx: 14px; animation-delay: .3s; } .hs-drops { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hs-bell, .hs-visitor, .hs-bird, .hs-rain, .hs-teapaw, .hs-drops { display: none; } } @keyframes hs-tt2 { 0% { opacity: 0; } 4% { opacity: 1; } 45% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes hs-tt3 { 0% { opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 34%, 100% { opacity: 0; } } @keyframes hs-ring { 0%, 8% { rotate: 0deg; } 9% { rotate: 17deg; } 10% { rotate: -15deg; } 11% { rotate: 11deg; } 12% { rotate: -8deg; } 13% { rotate: 5deg; } 14%, 100% { rotate: 0deg; } } @keyframes hs-visit { 0% { translate: -60px 0; opacity: 1; } 10% { translate: 100px 0; opacity: 1; } 31% { translate: 100px 0; opacity: 1; } 40% { translate: -60px 0; opacity: 1; } 40.1%, 100% { translate: -60px 0; opacity: 0; } } @keyframes hs-bubble { 0%, 11% { opacity: 0; } 13%, 29% { opacity: 1; } 31%, 100% { opacity: 0; } } @keyframes hs-vbob { from { translate: 0 0; } to { translate: 0 -2px; } } @keyframes hs-bird { 0% { translate: -60px 8px; opacity: 1; } 19% { translate: 590px 2px; opacity: 1; } 19.1%, 100% { translate: -60px 8px; opacity: 0; } } @keyframes hs-bbob { from { translate: 0 0; } to { translate: 0 -5px; } } @keyframes hs-flap { from { rotate: 0deg; } to { rotate: -34deg; } } @keyframes hs-shower { 0%, 36% { opacity: 0; } 41%, 56% { opacity: 1; } 61%, 100% { opacity: 0; } } @keyframes hs-drip { 0% { translate: 0 0; opacity: 0; } 10% { opacity: .8; } 90% { opacity: .8; } 100% { translate: -26px 300px; opacity: 0; } } @keyframes hs-slide { 0% { translate: 0 0; opacity: .7; } 70% { translate: -3px 70px; opacity: .6; } 100% { translate: -4px 120px; opacity: 0; } } @keyframes tea-wob { 0%, 53.2% { rotate: 0deg; } 53.5% { rotate: 7deg; } 53.9% { rotate: -5deg; } 54.3% { rotate: 3deg; } 54.7%, 100% { rotate: 0deg; } } @keyframes tea-paw { 0%, 51.8% { opacity: 0; translate: 2px 16px; } 52.7% { opacity: 1; translate: 0 0; } 53.3% { opacity: 1; translate: 0 -4px; } 53.7%, 54.2% { opacity: 1; translate: 0 0; } 55%, 100% { opacity: 0; translate: 2px 16px; } } @keyframes tea-drop { 0%, 53.3% { opacity: 0; translate: 0 0; } 53.6% { opacity: 1; translate: 0 -6px; } 54.7% { opacity: 0; translate: var(--dx, 8px) 20px; } 100% { opacity: 0; } } /* ===== v109: ana sayfa görselleri: kapak renk şeridi, bugünün sayfası, haftanın sahafı vitrini, mühür damgası, yeni gelen kenarı, sezon süsü ===== */ .tone-strip { height: 4px; margin: -14px 0 16px; border-radius: 3px; opacity: .85; } .today-page { display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: center; margin: 34px 0; padding: 24px 28px; border-radius: 10px; border: 1px solid #d9ccaa; background: radial-gradient(circle at 12% 0, rgba(255,255,255,.55), transparent 55%), linear-gradient(160deg, #f8f0da, #eddcb6); box-shadow: inset 0 0 40px rgba(122,80,30,.14); } .today-page .tp-cover img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 3px 6px 14px rgba(45,28,12,.35); transform: rotate(-3deg); } .today-page h2 { margin: 0 0 8px; font-size: .95rem; letter-spacing: .08em; color: var(--accent, #8a1f1a); } .today-page blockquote { position: relative; margin: 0 0 10px; padding: 0 0 0 34px; font: italic 1.25rem/1.55 var(--serif, Georgia, serif); max-width: 62ch; color: #3b2a1a; } .today-page blockquote::before { content: "“"; position: absolute; left: 0; top: -12px; font: 700 3.6rem/1 var(--serif, Georgia, serif); color: #b8892b; opacity: .75; } .today-page .tp-from { margin: 0 0 12px; font-weight: 600; color: #3b2a1a; } .today-page .tp-from a { color: inherit; } :root[data-theme="dark"] .today-page { background: linear-gradient(160deg, #2a2218, #1f1911); border-color: #4a3d2a; box-shadow: none; } :root[data-theme="dark"] .today-page blockquote, :root[data-theme="dark"] .today-page .tp-from { color: #efe3c6; } @media (max-width: 640px) { .today-page { grid-template-columns: 76px 1fr; gap: 16px; padding: 18px; } .today-page blockquote { font-size: 1.05rem; padding-left: 26px; } } .weekly-shop .ws-front { position: relative; display: block; aspect-ratio: 4 / 3.3; text-decoration: none; color: inherit; border-radius: 8px 8px 4px 4px; background: #3a2616; box-shadow: 0 10px 24px -10px rgba(45,28,12,.55); overflow: hidden; } .ws-front .ws-awn { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: repeating-linear-gradient(90deg, #8a1f1a 0 14%, #f6ead2 14% 28%); border-radius: 6px 6px 0 0; box-shadow: 0 6px 8px -4px rgba(0,0,0,.45); z-index: 2; } .ws-front .ws-awn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; background: repeating-linear-gradient(90deg, #8a1f1a 0 14%, #f6ead2 14% 28%); -webkit-mask: radial-gradient(circle 7px at 50% 0, #000 98%, #0000) 0 0 / 14% 100%; mask: radial-gradient(circle 7px at 50% 0, #000 98%, #0000) 0 0 / 14% 100%; } .ws-front .ws-sign { position: absolute; left: 10%; right: 10%; top: 25%; z-index: 3; padding: 4px 8px; text-align: center; font: 700 .95rem/1.2 var(--serif, Georgia, serif); color: #f3dfa6; background: #1f130b; border: 1.5px solid #c9a24a; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-front .ws-win { position: absolute; left: 7%; top: 40%; width: 60%; height: 50%; display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 6px 6px 0; background: linear-gradient(180deg, #ffd98a33, #f0a94922), #2a1a10; border: 3px solid #6b4423; border-radius: 3px; } .ws-front .ws-win::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: #8a5a32; } .ws-front .ws-win img { position: relative; z-index: 1; width: 30%; max-height: 92%; object-fit: cover; align-self: flex-end; margin-bottom: 7px; border-radius: 1px; box-shadow: 0 2px 5px rgba(0,0,0,.5); transition: translate .25s ease; } .ws-front .ws-win img:nth-child(1) { rotate: -4deg; } .ws-front .ws-win img:nth-child(3) { rotate: 4deg; } .ws-front:hover .ws-win img, .ws-front:focus-visible .ws-win img { translate: 0 -5px; } .ws-front .ws-door { position: absolute; right: 7%; top: 40%; width: 19%; height: 50%; background: #5a3a22; border: 3px solid #6b4423; border-radius: 3px 3px 0 0; } .ws-front .ws-door i { position: absolute; right: 12%; top: 52%; width: 7px; height: 7px; border-radius: 50%; background: #e2b852; } .ws-front .ws-door::before { content: ""; position: absolute; inset: 14% 18% 40%; background: #ffd98a55; border-radius: 2px; } @media (prefers-reduced-motion: no-preference) { .ws-front .ws-door { transform-origin: left center; transition: transform .5s ease; } .ws-front:hover .ws-door { transform: perspective(300px) rotateY(-28deg); } } @media (max-width: 640px) { .weekly-shop { grid-template-columns: 1fr; } } .card .card-cover { position: relative; } .card .stamp-sold { position: absolute; z-index: 4; left: 50%; top: 46%; translate: -50% -50%; rotate: -14deg; padding: 4px 12px; font: 800 1.05rem/1.1 var(--serif, Georgia, serif); letter-spacing: .1em; text-transform: uppercase; color: #9b1c1c; border: 3px double #9b1c1c; border-radius: 6px; background: rgba(255,248,230,.5); mix-blend-mode: multiply; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(155,28,28,.25); } @media (prefers-reduced-motion: no-preference) { .card .stamp-sold { animation: stampIn .45s cubic-bezier(.2,1.6,.4,1) both; } } @keyframes stampIn { from { scale: 1.9; opacity: 0; } to { scale: 1; opacity: 1; } } .card:has(> .ribbon-new) { box-shadow: 0 0 0 2px #c9a24a, 0 8px 20px -8px rgba(201,162,74,.6); } .card:has(> .ribbon-new) .card-cover::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,240,190,.55) 50%, transparent 60%); translate: -120% 0; } @media (prefers-reduced-motion: no-preference) { .card:has(> .ribbon-new) .card-cover::after { animation: freshSweep 7s ease-in-out 2s infinite; } } @keyframes freshSweep { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } } .hs-deco { pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .hs-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: hsSway 5s ease-in-out infinite alternate; } } @keyframes hsSway { from { rotate: -2.500deg; } to { rotate: 2.500deg; } } /* ===== Hero v2: raftan çekilen kitaplar, pencere dışı sokak, ikinci müşteri (yeni eser), zil varyantları ===== */ .hs-pull { cursor: pointer; outline: none; } .hs-pa { transform-box: fill-box; transform-origin: 0 100%; } .hs-pl { opacity: 0; pointer-events: none; } .hs-pull:hover .hs-pa, .hs-pull:focus-visible .hs-pa { translate: 0 -9px !important; rotate: -5deg !important; } .hs-pull:hover .hs-pl, .hs-pull:focus-visible .hs-pl { opacity: 1 !important; } @media (prefers-reduced-motion: no-preference) { .hs-pa { animation: hs-pull 36s ease-in-out calc(var(--k, 0) * 9s + 5s) infinite; } .hs-pl { animation: hs-pull-label 36s ease-in-out calc(var(--k, 0) * 9s + 5s) infinite; } } @keyframes hs-pull { 0% { translate: 0 0; rotate: 0deg; } 2%, 9% { translate: 0 -9px; rotate: -5deg; } 11%, 100% { translate: 0 0; rotate: 0deg; } } @keyframes hs-pull-label { 0%, 1%, 11%, 100% { opacity: 0; } 3%, 9% { opacity: 1; } } /* Pencere dışı: saate göre gökyüzü (data-tod v80.js) */ .hs-sk-night, .hs-sk-noon, .hs-moon, .hs-wk { display: none; } .hs-wk { opacity: 0; } .hero-scene[data-tod="gece"] .hs-sk-eve, .hero-scene[data-tod="gece"] .hs-sun { display: none; } .hero-scene[data-tod="gece"] .hs-sk-night, .hero-scene[data-tod="gece"] .hs-moon { display: inline; } .hero-scene[data-tod="ogle"] .hs-sk-eve { display: none; } .hero-scene[data-tod="ogle"] .hs-sk-noon { display: inline; } .hero-scene[data-tod="ogle"] .hs-sun { translate: 4px -64px; fill: #fff6c8; } .hero-scene[data-tod="sabah"] .hs-sun { translate: -26px 0; } .hero-scene[data-tod="gece"] .hs-lit { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .hs-wk { display: inline; } .hs-wk.w1 { animation: hs-w1 42s linear 3s infinite; } .hs-wk.w2 { animation: hs-w2 42s linear 3s infinite; } .hs-wk.w3 { animation: hs-w3 42s linear 3s infinite; } .hs-wb { animation: hs-vbob .5s ease-in-out infinite alternate; } .hs-lit { animation: hs-twinkle 5s ease-in-out infinite; } .hs-lit:nth-of-type(odd) { animation-delay: -2.2s; } } @keyframes hs-w1 { 0%, 2.9% { translate: -16px 0; opacity: 0; } 3% { translate: -16px 0; opacity: 1; } 33% { translate: 112px 0; opacity: 1; } 33.1%, 100% { translate: 112px 0; opacity: 0; } } @keyframes hs-w2 { 0%, 39.9% { translate: 112px 0; opacity: 0; } 40% { translate: 112px 0; opacity: 1; } 55% { translate: -26px 0; opacity: 1; } 55.1%, 100% { translate: -26px 0; opacity: 0; } } @keyframes hs-w3 { 0%, 61.9% { translate: -18px 0; opacity: 0; } 62% { translate: -18px 0; opacity: 1; } 96% { translate: 112px 0; opacity: 1; } 96.1%, 100% { translate: 112px 0; opacity: 0; } } /* İkinci müşteri (yeni eser): birincisinden 20 sn sonra gelir; zil iki ziyarette de çalar */ .hs-visitor.v2 { animation-delay: 27s; } .hs-visitor.v2 .hs-bubble { animation-delay: 27s; } @media (prefers-reduced-motion: no-preference) { .hs-bell.b { animation-name: hs-ring2; } .hs-bell.ab { animation-name: hs-ring3; } } @keyframes hs-ring2 { 0%, 58% { rotate: 0deg; } 59% { rotate: 17deg; } 60% { rotate: -15deg; } 61% { rotate: 11deg; } 62% { rotate: -8deg; } 63% { rotate: 5deg; } 64%, 100% { rotate: 0deg; } } @keyframes hs-ring3 { 0%, 8% { rotate: 0deg; } 9% { rotate: 17deg; } 10% { rotate: -15deg; } 11% { rotate: 11deg; } 12% { rotate: -8deg; } 13% { rotate: 5deg; } 14%, 58% { rotate: 0deg; } 59% { rotate: 17deg; } 60% { rotate: -15deg; } 61% { rotate: 11deg; } 62% { rotate: -8deg; } 63% { rotate: 5deg; } 64%, 100% { rotate: 0deg; } } /* ===== Hero v3: atmosfer (toz huzmesi, vapur+martı, sokak lambası, saat, gramofon, semaver) + okurlar + merdivendeki sahaf ===== */ .hs-rain, .hs-sl, .hs-ferry, .hs-gull { pointer-events: none; } .hs-sl, .hs-ring, .hs-notes, .hs-note, .hs-reader, .hs-sahaf, .hs-ferry, .hs-gull, .hs-toot { opacity: 0; } .hs-ferry { translate: 330px 0; } .hs-gull { translate: 335px 0; } .hero-scene[data-tod="aksam"] .hs-sl, .hero-scene[data-tod="gece"] .hs-sl { opacity: .3; } .hero-scene[data-tod="gece"] .hs-gull { display: none; } .hs-gramo { cursor: pointer; outline: none; } .hs-gramo:focus-visible { filter: drop-shadow(0 0 3px #ffd98a); } .hs-gramo.on .hs-ring { opacity: 1; animation: hs-spin 1.2s linear infinite; } .hs-gramo.on .hs-notes { opacity: 1; animation: none; } .hs-clock .hs-pend, .hs-clock .hs-sh, .hs-clock .hs-ckbody { transform-box: view-box; } .hs-clock .hs-pend { transform-origin: 371px 69px; } .hs-clock .hs-sh, .hs-clock .hs-ckbody { transform-origin: 371px 56px; } .hs-clarm { transform-origin: 7px -40px; transform-box: view-box; } .hs-smoke { transform-box: fill-box; transform-origin: 50% 50%; } @media (prefers-reduced-motion: no-preference) { .hero-scene[data-tod="aksam"] .hs-sl, .hero-scene[data-tod="gece"] .hs-sl { animation: hs-slf 4s ease-in-out infinite alternate; } .hs-ferry { animation: hs-ferry 90s linear infinite; } .hs-toot { animation: hs-toot 90s linear infinite; } .hs-smoke { animation: hs-smoke 3.2s ease-out infinite; } .hs-smoke.sm2 { animation-delay: -1.6s; } .hs-gull { animation: hs-gull 47s linear 9s infinite; } .hs-gull.g2 { animation-delay: 12.5s; } .hs-gw { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-gwing .26s ease-in-out infinite alternate; } .hs-clock .hs-pend { animation: hs-pend 2s ease-in-out infinite alternate; } .hs-clock .hs-sh { animation: hs-sec 60s steps(60) infinite; } .hs-clock.chime .hs-ckbody { animation: hs-ckshake .12s linear 24 alternate; } .hs-ring { animation: hs-spin 1.2s linear infinite, hs-gauto 100s linear infinite; } .hs-notes { animation: hs-gauto 100s linear infinite; } .hs-note { animation: hs-note 3s ease-out infinite; } .hs-note.n2 { animation-delay: 1s; } .hs-note.n3 { animation-delay: 2s; } .hs-reader { animation-duration: 120s; animation-iteration-count: infinite; animation-timing-function: linear; } .hs-reader.r1 { animation-name: hs-rd1; } .hs-reader.r2 { animation-name: hs-rd2; } .hs-reader .hs-vbob { animation: hs-vbob .5s ease-in-out infinite alternate; } .hs-reader .hs-rbub { opacity: 0; animation: 120s linear infinite; } .hs-reader.r1 .hs-rbub { animation-name: hs-rb1; } .hs-reader.r2 .hs-rbub { animation-name: hs-rb2; } .hs-reader .hs-rbook { opacity: 0; animation: 120s linear infinite; } .hs-reader.r1 .hs-rbook { animation-name: hs-rk1; } .hs-reader.r2 .hs-rbook { animation-name: hs-rk2; } .hs-sahaf { opacity: 1; } .hs-climb { opacity: 0; animation: hs-climb 100s linear infinite; } .hs-clarm { animation: hs-clarm 100s ease-in-out infinite; } .hs-clbook { opacity: 0; animation: hs-clbook 100s linear infinite; } .hs-clleg { animation: hs-clstep .9s ease-in-out infinite alternate; } .hs-clleg.b { animation-delay: -.45s; } } @media (prefers-reduced-motion: reduce) { .hs-reader, .hs-sahaf, .hs-ferry, .hs-gull { display: none; } } @keyframes hs-slf { from { opacity: .22; } to { opacity: .38; } } @keyframes hs-ferry { 0%, 30% { translate: 330px 0; opacity: 1; } 55%, 100% { translate: 470px 0; opacity: 1; } } @keyframes hs-toot { 0%, 41% { opacity: 0; } 41.500%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } } @keyframes hs-smoke { 0% { translate: 0 0; opacity: .7; scale: .8; } 100% { translate: -12px -16px; opacity: 0; scale: 1.7; } } @keyframes hs-gull { 0% { translate: 335px 0; opacity: 1; } 30% { translate: 462px -12px; opacity: 1; } 30.100%, 100% { translate: 335px 0; opacity: 0; } } @keyframes hs-gwing { from { scale: 1 1; } to { scale: 1 -.7; } } @keyframes hs-pend { from { rotate: -13deg; } to { rotate: 13deg; } } @keyframes hs-sec { to { rotate: 360deg; } } @keyframes hs-ckshake { from { rotate: -4deg; } to { rotate: 4deg; } } @keyframes hs-spin { to { stroke-dashoffset: -28; } } @keyframes hs-gauto { 0%, 70% { opacity: 0; } 71%, 81% { opacity: 1; } 82%, 100% { opacity: 0; } } @keyframes hs-note { 0% { translate: 0 6px; opacity: 0; } 20% { opacity: 1; } 100% { translate: 10px -22px; opacity: 0; } } /* okurlar (120 sn'de bir; balonlar sipariş/sahaf ziyaretçilerinin balonlarıyla çakışmaz) */ @keyframes hs-rd1 { 0%, 41.600% { translate: -60px 0; opacity: 0; } 41.700% { translate: -60px 0; opacity: 1; } 48.300%, 66.600% { translate: 230px 0; opacity: 1; } 75% { translate: -60px 0; opacity: 1; } 75.100%, 100% { translate: -60px 0; opacity: 0; } } @keyframes hs-rd2 { 0%, 78.200% { translate: -60px 0; opacity: 0; } 78.300% { translate: -60px 0; opacity: 1; } 84%, 90% { translate: 330px 0; opacity: 1; } 99.500% { translate: -60px 0; opacity: 1; } 99.600%, 100% { translate: -60px 0; opacity: 0; } } @keyframes hs-rb1 { 0%, 51.500% { opacity: 0; } 52%, 56.500% { opacity: 1; } 57%, 100% { opacity: 0; } } @keyframes hs-rb2 { 0%, 84.800% { opacity: 0; } 85.200%, 89.700% { opacity: 1; } 90.200%, 100% { opacity: 0; } } @keyframes hs-rk1 { 0%, 53.900% { opacity: 0; } 54%, 100% { opacity: 1; } } @keyframes hs-rk2 { 0%, 85.900% { opacity: 0; } 86%, 100% { opacity: 1; } } /* merdivendeki sahaf (100 sn'de bir): tabana gelir, tırmanır, rafa uzanıp kitap alır, iner */ @keyframes hs-climb { 0%, 25% { translate: 0 0; opacity: 0; } 26.500%, 28% { translate: 0 0; opacity: 1; } 36%, 43% { translate: 18.4px -166px; opacity: 1; } 51% { translate: 0 0; opacity: 1; } 52%, 100% { translate: 0 0; opacity: 0; } } @keyframes hs-clarm { 0%, 36.500% { rotate: 0deg; } 38%, 40% { rotate: -110deg; } 42%, 100% { rotate: 0deg; } } @keyframes hs-clbook { 0%, 39.900% { opacity: 0; } 40%, 100% { opacity: 1; } } @keyframes hs-clstep { from { translate: 0 0; } to { translate: 0 -3px; } } /* ===== Hero v4: sipariş kutusu, gelen koli, nadir eser dolabı, elektrik kesintisi + mum, simit arabası, sonbahar yaprağı, kış karı ===== */ .hs-obdrop, .hs-courier, .hs-fbox, .hs-sleaf, .hs-sflake, .hs-vsweep, .hs-vsp { opacity: 0; } .hs-obox, .hs-courier, .hs-fbox, .hs-snow { pointer-events: none; } .hs-vitrin { cursor: pointer; outline: none; } .hs-vitrin:hover .hs-vframe, .hs-vitrin:focus-visible .hs-vframe { stroke: #fff1bd; } .hs-vsp, .hs-fsp, .hs-obstamp, .hs-obtape, .hs-obf, .hs-fbf, .hs-sleaf, .hs-sflake, .hs-snow { transform-box: fill-box; } .hs-obf.l, .hs-fbf.l { transform-origin: 0 100%; } .hs-obf.r, .hs-fbf.r { transform-origin: 100% 100%; } .hs-obtape { transform-origin: 50% 0; } .hs-obstamp { transform-origin: 50% 50%; } .hs-snow { transform-origin: 50% 100%; } .hs-snow { scale: 1 .3; } .hs-vsweep { translate: -20px 0; } @media (prefers-reduced-motion: no-preference) { .hs-obdrop { animation: hs-obdrop 60s linear 10s infinite; } .hs-obf.l { animation: hs-obfl 60s linear 10s infinite; } .hs-obf.r { animation: hs-obfr 60s linear 10s infinite; } .hs-obtape { scale: 1 0; animation: hs-obtape 60s linear 10s infinite; } .hs-obstamp { opacity: 0; animation: hs-obstamp 60s linear 10s infinite; } .hs-courier { animation: hs-cr 120s linear infinite; } .hs-courier .hs-vbob { animation: hs-vbob .5s ease-in-out infinite alternate; } .hs-cbheld { animation: hs-cbheld 120s linear infinite; } .hs-fbox { animation: hs-fbox 120s linear infinite; } .hs-fbf.l { animation: hs-obfl2 120s linear infinite; } .hs-fbf.r { animation: hs-obfr2 120s linear infinite; } .hs-fbook { opacity: 0; animation: hs-fbook 120s linear infinite; } .hs-fsp { opacity: 0; animation: hs-fsp 120s linear infinite; } .hs-vsweep { animation: hs-vsweep 9s ease-in-out infinite; } .hs-vsp { animation: hs-twinkle 3.2s ease-in-out infinite; } .hs-wk.w4 { animation: hs-w4 70s linear 20s infinite; } .hs-wk.w5 { animation: hs-w5 55s linear 9s infinite; } .hs-sleaf { animation: hs-sleaf 7s ease-in-out infinite; } .hs-sflake { animation: hs-sflake 6s linear infinite; } .hs-snow { animation: hs-snowup 70s ease-out forwards; } } @media (prefers-reduced-motion: reduce) { .hs-courier, .hs-fbox, .hs-obox { display: none; } .hs-snow { scale: 1 1; } } @keyframes hs-obdrop { 0%, 1% { translate: 0 -64px; opacity: 0; } 2% { translate: 0 -64px; opacity: 1; } 5% { translate: 0 0; } 6% { translate: 0 -5px; } 7%, 80% { translate: 0 0; opacity: 1; } 84% { translate: 0 -46px; opacity: 0; } 84.100%, 100% { translate: 0 -46px; opacity: 0; } } @keyframes hs-obfl { 0%, 8% { rotate: -105deg; } 11%, 100% { rotate: 0deg; } } @keyframes hs-obfr { 0%, 8% { rotate: 105deg; } 11%, 100% { rotate: 0deg; } } @keyframes hs-obtape { 0%, 12% { scale: 1 0; } 17%, 100% { scale: 1 1; } } @keyframes hs-obstamp { 0%, 19% { opacity: 0; scale: 2.600; } 19.500% { opacity: 1; scale: 2.600; } 21%, 100% { opacity: 1; scale: 1; } } @keyframes hs-cr { 0%, 7.900% { translate: -60px 0; opacity: 0; } 8% { translate: -60px 0; opacity: 1; } 14%, 17.500% { translate: 150px 0; opacity: 1; } 24% { translate: -60px 0; opacity: 1; } 24.100%, 100% { translate: -60px 0; opacity: 0; } } @keyframes hs-cbheld { 0%, 14.900% { opacity: 1; } 15%, 100% { opacity: 0; } } @keyframes hs-fbox { 0%, 14.900% { opacity: 0; } 15%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } } @keyframes hs-obfl2 { 0%, 17% { rotate: 0deg; } 19.500%, 29% { rotate: -105deg; } 31%, 100% { rotate: -105deg; } } @keyframes hs-obfr2 { 0%, 17% { rotate: 0deg; } 19.500%, 29% { rotate: 105deg; } 31%, 100% { rotate: 105deg; } } @keyframes hs-fbook { 0%, 19.900% { opacity: 0; translate: 0 0; } 20% { opacity: 1; translate: 0 0; } 25% { translate: 8px -50px; opacity: 1; } 29% { translate: 24px -150px; opacity: 1; } 29.500%, 100% { translate: 24px -150px; opacity: 0; } } @keyframes hs-fsp { 0%, 29% { opacity: 0; scale: .4; } 30.500% { opacity: 1; scale: 1.2; } 33%, 100% { opacity: 0; scale: 1; } } @keyframes hs-vsweep { 0%, 55% { translate: -20px 0; opacity: 0; } 62% { opacity: .35; } 85%, 100% { translate: 60px 0; opacity: 0; } } @keyframes hs-w4 { 0%, .100% { translate: -30px 0; opacity: 0; } .200% { translate: -30px 0; opacity: 1; } 26% { translate: 130px 0; opacity: 1; } 26.100%, 100% { translate: 130px 0; opacity: 0; } } @keyframes hs-w5 { 0%, .100% { translate: 130px 0; opacity: 0; } .200% { translate: 130px 0; opacity: 1; } 20% { translate: -20px 0; opacity: 1; } 20.100%, 100% { translate: -20px 0; opacity: 0; } } @keyframes hs-sleaf { 0% { translate: 0 0; rotate: 0deg; opacity: 0; } 10% { opacity: 1; } 50% { translate: 52px -16px; } 100% { translate: 112px 6px; rotate: 620deg; opacity: 0; } } @keyframes hs-sflake { 0% { translate: 0 0; opacity: 0; } 10% { opacity: .9; } 100% { translate: -8px 100px; opacity: 0; } } @keyframes hs-snowup { from { scale: 1 .3; } to { scale: 1 1; } } /* ===== Hero v5: SATILDI mührü, haftanın sahafı, yorum kavanozu, sepetteki kitap, telefon, kedinin oyunu, havai fişek, kayan yıldız, okul servisi, Anneler/Babalar Günü ===== */ .hs-sold, .hs-jnote, .hs-phb, .hs-phring, .hs-ball, .hs-shoot, .hs-fwb, .hs-fw { opacity: 0; } .hs-fw, .hs-shoot, .hs-phone, .hs-phb, .hs-sold, .hs-ball, .hs-jnote { pointer-events: none; } .hs-fw, .hs-shoot { display: none; } .hero-scene[data-tod="aksam"] .hs-fw, .hero-scene[data-tod="gece"] .hs-fw { display: inline; opacity: 1; } .hero-scene[data-tod="gece"] .hs-shoot { display: inline; } .hero-scene[data-tod="aksam"] .hs-sch, .hero-scene[data-tod="gece"] .hs-sch { display: none !important; } .hs-wkshop, .hs-jar { cursor: pointer; } .hs-wkshop:hover rect, .hs-wkshop:focus-visible rect { fill: #fff1bd; } .hs-sold, .hs-handset, .hs-ballin, .hs-ballbn, .hs-ballmv { transform-box: fill-box; transform-origin: 50% 50%; } .hs-handset { transform-origin: 50% 100%; } .hs-fwb, .hs-shoot { transform-box: view-box; transform-origin: 0 0; } .hs-shoot { translate: 440px 154px; } .hs-reader.r3 .hs-rbook { opacity: 1 !important; animation: none !important; } @media (prefers-reduced-motion: no-preference) { .hs-sold { animation: hs-sold 90s linear calc(var(--k, 0) * -30s) infinite; } .hs-jnote { animation: hs-jfall 45s linear 6s infinite; } .hs-reader.r3 { animation-name: hs-rd3; } .hs-reader.r3 .hs-rbub { animation-name: hs-rb3; } .hs-handset { animation: hs-phshake 75s linear infinite; } .hs-phring { animation: hs-phrg 75s linear infinite; } .hs-phb { animation: hs-phb 75s linear infinite; } .hs-ball { opacity: 1; } .hs-ballmv { opacity: 0; animation: hs-ballmv 48s linear infinite; } .hs-ballin { animation: hs-ballroll 48s linear infinite; } .hs-ballbn { animation: hs-ballbn .5s ease-in-out infinite alternate; } .hs-fwb { animation: hs-fwb 9s ease-out infinite; } .hs-shoot { animation: hs-shoot 41s linear 5s infinite; } .hs-wk.w6 { animation: hs-w6 100s linear 30s infinite; } .hs-wk.w7 { animation: hs-w7 100s linear 12s infinite; } } @media (prefers-reduced-motion: reduce) { .hs-sold { opacity: 1; } .hs-fw, .hs-shoot, .hs-ball, .hs-jnote { display: none; } } @keyframes hs-sold { 0%, 3% { opacity: 0; scale: 2.400; } 3.500% { opacity: 1; scale: 2.400; } 5%, 88% { opacity: 1; scale: 1; } 94%, 100% { opacity: 0; scale: 1; } } @keyframes hs-jfall { 0%, 8% { translate: 0 0; opacity: 0; } 9% { opacity: 1; } 20% { translate: 0 52px; opacity: 1; } 22%, 100% { translate: 0 52px; opacity: 0; } } @keyframes hs-rd3 { 0%, 27.400% { translate: -60px 0; opacity: 0; } 27.500% { translate: -60px 0; opacity: 1; } 32.500%, 38.300% { translate: 250px 0; opacity: 1; } 45% { translate: -60px 0; opacity: 1; } 45.100%, 100% { translate: -60px 0; opacity: 0; } } @keyframes hs-rb3 { 0%, 34.400% { opacity: 0; } 34.700%, 37.600% { opacity: 1; } 38%, 100% { opacity: 0; } } @keyframes hs-phshake { 0%, 26.40% { rotate: 0deg; } 26.50% { rotate: 5deg; } 26.96% { rotate: -5deg; } 27.42% { rotate: 5deg; } 27.88% { rotate: -5deg; } 28.33% { rotate: 5deg; } 28.79% { rotate: -5deg; } 29.25% { rotate: 5deg; } 29.71% { rotate: -5deg; } 30.17% { rotate: 5deg; } 30.62% { rotate: -5deg; } 31.08% { rotate: 5deg; } 31.54% { rotate: -5deg; } 32.00% { rotate: 5deg; } 32.50%, 100% { rotate: 0deg; } } @keyframes hs-phrg { 0%, 26.40% { opacity: 0; } 26.50% { opacity: 1; } 26.96% { opacity: .15; } 27.42% { opacity: 1; } 27.88% { opacity: .15; } 28.33% { opacity: 1; } 28.79% { opacity: .15; } 29.25% { opacity: 1; } 29.71% { opacity: .15; } 30.17% { opacity: 1; } 30.62% { opacity: .15; } 31.08% { opacity: 1; } 31.54% { opacity: .15; } 32.00% { opacity: 1; } 32.50%, 100% { opacity: 0; } } @keyframes hs-phb { 0%, 33% { opacity: 0; } 33.500%, 42% { opacity: 1; } 43%, 100% { opacity: 0; } } @keyframes hs-ballmv { 0%, 55.900% { translate: 0 0; opacity: 0; } 56% { translate: 0 0; opacity: 1; } 66% { translate: -100px 0; opacity: 1; } 66.500%, 100% { translate: -100px 0; opacity: 0; } } @keyframes hs-ballroll { 0%, 56% { rotate: 0deg; } 66%, 100% { rotate: -720deg; } } @keyframes hs-ballbn { from { translate: 0 0; } to { translate: 0 -4px; } } @keyframes hs-fwb { 0% { scale: .15; opacity: 0; } 6% { opacity: 1; } 55% { scale: 1; opacity: 1; } 80%, 100% { scale: 1.150; opacity: 0; } } @keyframes hs-shoot { 0%, 93% { translate: 440px 154px; opacity: 0; } 94% { translate: 440px 154px; opacity: 1; } 98% { translate: 384px 176px; opacity: 1; } 98.500%, 100% { translate: 380px 178px; opacity: 0; } } @keyframes hs-w6 { 0%, .100% { translate: -30px 0; opacity: 0; } .200% { translate: -30px 0; opacity: 1; } 11% { translate: 135px 0; opacity: 1; } 11.100%, 100% { translate: 135px 0; opacity: 0; } } @keyframes hs-w7 { 0%, .100% { translate: -20px 0; opacity: 0; } .200% { translate: -20px 0; opacity: 1; } 18% { translate: 125px 0; opacity: 1; } 18.100%, 100% { translate: 125px 0; opacity: 0; } }