/* ==========================================================================
   sinapsa — stil katmanı
   Tasarım: krem/kâğıt + serif; sinapsa arayüzünden türetildi.
   Renkler ve ölçüler :root değişkenlerinde; tek yerden düzenlenebilir.
   ========================================================================== */

/* Eski Sinapsa tipografisi yerel dosyalardan yüklenir; görünüm ağdan bağımsız kalır. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500 700;font-display:swap;src:url('assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500 700;font-display:swap;src:url('assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 700;font-display:swap;src:url('assets/fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 700;font-display:swap;src:url('assets/fonts/cormorant-garamond-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url('assets/fonts/eb-garamond-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url('assets/fonts/eb-garamond-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('assets/fonts/eb-garamond-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('assets/fonts/eb-garamond-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('assets/fonts/jetbrains-mono-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('assets/fonts/jetbrains-mono-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#1c1a16;          /* ana metin / koyu */
  --ink-2:#2f2a22;
  --body:#3a342a;         /* gövde metni */
  --muted:#6a6253;        /* soluk etiket */
  --faint:#8a7f68;        /* çok soluk çizgi */
  --paper:#ece4d2;        /* zemin krem */
  --paper-hi:#f4eeddff;
  --line:#1c1a16;
  --err:#a8261c;
  --gold:#c8932a;
  --accent:#7c1a12;       /* kart bazında JS ile değişir */
  --card-bg:#e7dcc2;      /* kart bazında JS ile değişir */
  --title-fs:48px;        /* kart uzunluğuna göre javascript ayarlar */
  --text-fs:20px;
  --quote-fs:40px;
  --serif:'EB Garamond',Georgia,serif;
  --display:'Cormorant Garamond',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:#d8cdb4;
  color:var(--body);
  font-family:var(--serif);
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}

/* uygulama çerçevesi — telefonda tam ekran, masaüstünde okunur genişlik */
#app{
  width:min(720px,100vw);
  height:100dvh;
  margin:0 auto;
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(20,16,10,.55);
}
@media (min-width:760px) and (min-height:720px){
  #app{width:min(720px,calc(100vw - 48px));height:calc(100dvh - 48px);margin:24px auto;border-radius:14px}
  .card .inner{padding-left:clamp(34px,6vw,64px);padding-right:clamp(34px,6vw,64px)}
  .panel .pb{padding-left:42px;padding-right:42px}
}
@media (min-width:1100px) and (min-height:720px){
  #app{width:min(920px,calc(100vw - 80px));height:calc(100dvh - 64px);margin:32px auto}
  .card .inner{width:min(820px,100%);margin-inline:auto;padding-left:72px;padding-right:72px}
  .hrow,.hmeta{width:min(850px,100%);margin-inline:auto}
  .panel .pb{padding-left:70px;padding-right:70px}
}

.hidden{display:none !important}

a{color:inherit}
button{font-family:var(--mono);cursor:pointer}
button,input{color:inherit}

.feed-loader{position:absolute;inset:0;z-index:40;display:block;overflow:hidden;background:#ece4d2;color:var(--ink);opacity:1;transition:opacity .42s ease}
.feed-loader.hidden{display:none}
.feed-loader.leaving{opacity:0;pointer-events:none}
.opening-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#ece4d2}
.opening-poster-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(236,228,210,.1) 73%,rgba(236,228,210,.78) 100%);pointer-events:none}
.opening-motion{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:42px auto;align-items:center;gap:9px;min-width:206px;padding:6px 15px 7px 9px;border:1px solid rgba(23,19,15,.14);border-radius:999px;background:rgba(244,237,222,.84);box-shadow:0 8px 28px rgba(23,19,15,.16);backdrop-filter:blur(6px)}
.feed-loader p{margin:0;font-family:var(--display);font-style:italic;font-size:15px;color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.logo-loop{position:relative;width:42px;height:61px;overflow:hidden;filter:drop-shadow(0 3px 7px rgba(23,19,15,.14))}
.logo-loop-copy{position:absolute;left:50%;top:50%;width:30px;height:50px;background:url('assets/logo.png') center/contain no-repeat;opacity:0;transform:translate(-50%,55px);will-change:transform,opacity}
.logo-loop-copy-1{animation:logo-rise .84s cubic-bezier(.3,.04,.18,1) 0s 1 both}
.logo-loop-copy-2{animation:logo-rise .84s cubic-bezier(.3,.04,.18,1) .78s 1 both}
.logo-loop-copy-3{animation:logo-rise .84s cubic-bezier(.3,.04,.18,1) 1.56s 1 both}
@keyframes logo-rise{0%{transform:translate(-50%,55px);opacity:0}22%{transform:translate(-50%,-50%);opacity:1}62%{transform:translate(-50%,-50%);opacity:1}100%{transform:translate(-50%,-165%);opacity:0}}
/* ===================== BAŞLIK ===================== */
header{
  flex:0 0 auto;position:relative;z-index:7;
  background:rgba(236,228,210,.94);backdrop-filter:blur(7px);
  border-bottom:1px solid var(--ink);padding-top:env(safe-area-inset-top);
}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px 7px}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand-title{margin:0;font:inherit;line-height:1}
.brand-reset{display:flex;align-items:center;gap:8px;border:0;background:none;color:inherit;padding:0;text-align:left}
.brand-reset:active{transform:scale(.96)}
.brand-reset:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.brand img{width:22px;height:auto;flex:0 0 auto}
.brand .name{font-family:var(--display);font-style:italic;font-weight:600;font-size:22px;line-height:.85;color:var(--ink)}
.brand .sub{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.13em;color:var(--muted);margin-top:2px;text-decoration:none;white-space:nowrap}
.tools{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.tools button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:28px;height:28px;font-size:10px;background:none;border:0;color:var(--body);padding:4px;border-radius:0}
.tools button:active{transform:scale(.94)}
.search-symbol{position:relative;display:block;width:13px;height:13px;border:1.6px solid currentColor;border-radius:50%}
.search-symbol::after{content:"";position:absolute;width:6px;height:1.6px;background:currentColor;right:-5px;bottom:-2px;transform:rotate(45deg);transform-origin:left center;border-radius:2px}
.header-reactions{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;font-variant-numeric:tabular-nums}
.header-reactions span{display:flex;align-items:center;gap:2px}
.header-reactions i{font-style:normal;display:inline-block;line-height:1}
.header-reactions b{font-weight:500;color:var(--muted)}
.archive-counter{display:flex;align-items:center;gap:3px;border:0;background:none;color:#9a6a16;padding:4px;font-family:var(--mono);font-size:11px}
.archive-counter b{font-weight:600;font-variant-numeric:tabular-nums}
.header-like{color:#d51d14}
.header-dislike{color:#17130f}
.header-dislike i{transform:rotate(180deg)}
.hmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px 8px}
.hmeta .timer{font-family:var(--display);font-style:italic;font-size:15px;color:var(--body);line-height:1}
.hmeta .timer.milestone{animation:timer-milestone 1.15s cubic-bezier(.2,.76,.24,1)}
@keyframes timer-milestone{
  0%,100%{font-weight:500;transform:scale(1)}
  38%{font-weight:700;transform:scale(1.075)}
  68%{font-weight:650;transform:scale(1.025)}
}
.hmeta .count{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--faint);white-space:nowrap}

/* ===================== AKIŞ ===================== */
#feed{
  flex:1 1 auto;min-height:0;overflow-y:scroll;
  scroll-snap-type:y mandatory;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;position:relative;z-index:1;touch-action:pan-y;overflow-anchor:none;
}
#feed,.saved-feed-scroll,.panel .pb{scrollbar-width:none}
#feed::-webkit-scrollbar,.saved-feed-scroll::-webkit-scrollbar,.panel .pb::-webkit-scrollbar{display:none}
.feed-history-spacer{height:0;min-height:0;flex:0 0 auto;pointer-events:none;scroll-snap-align:none}
.card,.card .inner,.card .body{touch-action:pan-y}
.save-star{line-height:1;color:var(--muted)!important}
.save-star.on{color:#9a6a16!important}
.save-star.hold-progress{animation:archive-hold .62s ease-in-out}
@keyframes archive-hold{0%{transform:scale(1)}70%{transform:scale(1.38);color:#9a6a16}100%{transform:scale(1)}}
.card.swipe-out-right{transform:translate3d(105%,0,0) rotate(2deg);opacity:.18;transition:transform .18s cubic-bezier(.2,.78,.2,1),opacity .16s ease-out}
.saved-feed{position:absolute;inset:0;z-index:12;background:#f2e4ad;display:flex;flex-direction:column;touch-action:pan-y;transform:translateX(102%);opacity:.72;transition:transform .36s cubic-bezier(.2,.78,.2,1),opacity .24s ease;will-change:transform;box-shadow:-18px 0 38px -24px rgba(28,22,14,.65)}
.saved-feed.hidden{display:none}
.saved-feed.open{transform:translateX(0);opacity:1}
.saved-feed-head{height:58px;padding:env(safe-area-inset-top) 18px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--faint);font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink)}
.saved-feed-scroll{flex:1;min-height:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain}
.saved-feed-scroll .card{height:100%;scroll-snap-align:start}
.saved-feed-scroll .card .bg{background:#f2e4ad}
.saved-feed-scroll .card .paper{display:none}
.archive-choice{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.archive-choice button{border:1px solid color-mix(in srgb,var(--muted) 55%,transparent);background:transparent;color:var(--body);padding:7px 9px;font-family:var(--mono);font-size:9px;letter-spacing:.04em}
.archive-choice .archive-remove{border-color:#9a6a16;color:#7f5712}
.saved-empty{height:100%;display:grid;place-items:center;padding:32px;text-align:center;font-family:var(--display);font-style:italic;font-size:22px;color:var(--muted)}
.edge-tab{position:absolute;top:calc(env(safe-area-inset-top) + 132px);z-index:9;width:30px;height:82px;margin:0;padding:9px 4px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);background:color-mix(in srgb,#e5cf88 78%,var(--paper));color:color-mix(in srgb,var(--ink) 76%,var(--muted));box-shadow:0 8px 20px -12px rgba(28,22,14,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;opacity:.82;touch-action:manipulation;transition:opacity .18s ease,transform .18s ease,background .18s ease}
.edge-tab span{font-family:var(--mono);font-size:8px;letter-spacing:.13em;writing-mode:vertical-rl;text-orientation:mixed}
.edge-tab b{font-family:Arial,sans-serif;font-size:17px;font-weight:400;line-height:1}
.edge-tab:hover,.edge-tab:focus-visible{opacity:1;background:#e5cf88;outline:0}
.edge-tab:active{transform:scale(.96)}
.edge-tab-archive{right:0;border-right:0;border-radius:11px 0 0 11px}
.edge-tab-flow{left:0;z-index:14;border-left:0;border-radius:0 11px 11px 0}
.edge-tab-flow span{transform:rotate(180deg)}
.timer strong{font-weight:700;color:var(--ink)}
.timer .minute-roll{display:inline-block;min-width:.62em;text-align:center;font-variant-numeric:tabular-nums}
.timer .minute-roll.changed{animation:minute-roll-up .72s cubic-bezier(.2,.72,.22,1)}
@keyframes minute-roll-up{0%{opacity:.15;transform:translateY(55%)}55%{opacity:1;transform:translateY(-9%)}100%{opacity:1;transform:translateY(0)}}
.card{
  height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.2,.78,.2,1);transform-origin:center;
  -webkit-user-select:none;user-select:none;
}
.title.title-pending,.aphorism-title.title-pending{
  transform:translateY(var(--title-lag-y,28px));
  opacity:.12;
  will-change:transform,opacity;
}
.title.title-pending.title-arrived,.aphorism-title.title-pending.title-arrived{
  transform:translateY(0);
  opacity:1;
  transition:transform .42s cubic-bezier(.16,.78,.18,1),opacity .24s ease-out;
}
.card.is-pinching{z-index:8;transition:none;will-change:transform;contain:paint;backface-visibility:hidden}
.card .bg{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 78% 8%,rgba(255,255,255,.42),rgba(255,255,255,0) 55%),
  var(--card-bg);}
.card .bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 34%,color-mix(in srgb,var(--accent) 3%,transparent));border-left:3px solid color-mix(in srgb,var(--accent) 34%,transparent)}
.card .paper{position:absolute;inset:0;background-image:url('assets/paper.webp');
  background-size:cover;mix-blend-mode:multiply;opacity:.10;pointer-events:none}
.card.paper-grid .paper{
  background-color:#efe3c5;
  background-image:linear-gradient(rgba(70,112,132,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(70,112,132,.18) 1px,transparent 1px),url('assets/paper.webp');
  background-size:26px 26px,26px 26px,cover;opacity:.55
}
.card.paper-straw .paper{
  background-color:#dcc89d;
  background-image:repeating-linear-gradient(8deg,rgba(96,67,29,.045) 0 1px,transparent 1px 8px),radial-gradient(ellipse at 18% 24%,rgba(112,79,30,.15),transparent 38%),radial-gradient(ellipse at 82% 66%,rgba(255,255,255,.24),transparent 44%),url('assets/paper.webp');
  background-size:auto,auto,auto,cover;opacity:.62
}
.card.paper-lined .paper{
  background-color:#eee4ca;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,rgba(76,109,137,.22) 28px,transparent 29px),url('assets/paper.webp');
  background-size:auto,cover;opacity:.52
}
.card.paper-dotted .paper{
  background-color:#eee2c5;
  background-image:radial-gradient(circle,rgba(66,91,108,.28) 1px,transparent 1.4px),url('assets/paper.webp');
  background-size:22px 22px,cover;opacity:.50
}
.card.paper-wash .paper{
  background-image:radial-gradient(ellipse at 24% 18%,rgba(132,91,42,.18),transparent 34%),radial-gradient(ellipse at 78% 73%,rgba(111,76,35,.10),transparent 38%),url('assets/paper.webp');
  background-size:auto,auto,cover;opacity:.44
}
.card.paper-halo .paper{
  background-image:radial-gradient(circle at 68% 28%,transparent 0 14%,rgba(121,84,43,.13) 15% 17%,transparent 19%),url('assets/paper.webp');
  background-size:auto,cover;opacity:.46
}
.card.paper-corner .paper{
  background-image:radial-gradient(ellipse at 0 100%,rgba(104,70,32,.23),transparent 44%),linear-gradient(145deg,transparent 64%,rgba(255,255,255,.22)),url('assets/paper.webp');
  background-size:auto,auto,cover;opacity:.48
}
.card.paper-cloud .paper{
  background-image:radial-gradient(ellipse at 38% 58%,rgba(137,102,57,.13),transparent 33%),radial-gradient(ellipse at 61% 42%,rgba(255,255,255,.25),transparent 30%),url('assets/paper.webp');
  background-size:auto,auto,cover;opacity:.47
}
.card.paper-speckle .paper{
  background-image:radial-gradient(circle at 18% 28%,rgba(91,65,34,.20) 0 1px,transparent 1.7px),radial-gradient(circle at 74% 67%,rgba(91,65,34,.16) 0 1.2px,transparent 1.9px),url('assets/paper.webp');
  background-size:31px 35px,43px 39px,cover;opacity:.42
}
.card.paper-crease .paper{
  background-image:linear-gradient(102deg,transparent 0 46%,rgba(105,78,43,.12) 48%,rgba(255,255,255,.20) 49%,transparent 51%),url('assets/paper.webp');
  background-size:auto,cover;opacity:.46
}
.card.paper-ring .paper{
  background-image:radial-gradient(circle at 22% 76%,transparent 0 42px,rgba(113,77,37,.14) 44px 47px,transparent 49px),radial-gradient(circle at 88% 12%,transparent 0 25px,rgba(113,77,37,.09) 27px 29px,transparent 31px),url('assets/paper.webp');
  background-size:auto,auto,cover;opacity:.45
}
.card.paper-fade .paper{
  background-image:linear-gradient(to bottom right,rgba(255,255,255,.22),transparent 42%,rgba(115,80,40,.12)),url('assets/paper.webp');
  background-size:auto,cover;opacity:.48
}
.card.paper-cup .paper{
  background-color:#ddc99d;
  background-image:repeating-linear-gradient(7deg,rgba(93,64,27,.04) 0 1px,transparent 1px 9px),radial-gradient(ellipse at 76% 72%,rgba(255,255,255,.22),transparent 43%),url('assets/paper.webp');
  background-size:auto,auto,cover;opacity:.60
}
.card.paper-cup .paper::after{
  content:"";position:absolute;left:var(--cup-x);top:var(--cup-y);width:var(--cup-size);height:calc(var(--cup-size) * .92);
  transform:translate(-50%,-50%) rotate(var(--cup-turn));border:clamp(3px,.65vw,6px) solid rgba(105,68,30,.18);border-radius:50%;
  box-shadow:inset 1px 0 rgba(92,59,25,.12),0 1px rgba(255,255,255,.18),3px 2px 7px rgba(103,70,34,.035)
}
.card.paper-cup-b .paper{background-color:#e3cfa6}
.card.paper-cup-b .paper::after{border-width:1px 3px 2px 1px;border-color:rgba(107,71,31,.11) rgba(107,71,31,.22) rgba(107,71,31,.16) rgba(107,71,31,.08);transform:translate(-50%,-50%) rotate(var(--cup-turn)) scaleX(1.08)}
.card.paper-cup-c .paper{background-color:#d8c18e;background-image:repeating-linear-gradient(-11deg,rgba(90,60,24,.035) 0 1px,transparent 1px 7px),radial-gradient(ellipse at 18% 28%,rgba(119,80,33,.10),transparent 36%),url('assets/paper.webp')}
.card.paper-cup-c .paper::after{border-style:solid dashed solid solid;box-shadow:inset 0 0 0 3px rgba(108,72,30,.035),5px -2px 9px rgba(89,57,25,.04)}
.card .inner{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  padding:20px 22px calc(20px + env(safe-area-inset-bottom));
}
.kicker{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.kicker .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent);white-space:nowrap}
.kicker .lbl b{color:var(--accent);font-weight:500}
.category-jump{margin:-5px 0;padding:5px 3px;min-height:24px;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
.category-jump:hover{color:var(--accent)}
.category-jump:focus-visible{color:var(--accent);outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
.category-jump:active{opacity:.58}
.kicker .l{flex:1;height:1px;background:var(--accent);opacity:.42}
.page-no{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--accent);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right;white-space:nowrap}
.intro-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.intro-head .prompt-note{margin-bottom:0}
.body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:6px 6px 18px 0;overflow:hidden}
.title{align-self:center;width:100%;font-family:var(--display);font-style:italic;font-weight:600;font-size:var(--title-fs);line-height:1.01;margin:0 0 16px;padding-bottom:.12em;letter-spacing:-.02em;color:var(--ink);text-align:center;text-wrap:balance}
.text{font-size:var(--text-fs);line-height:1.49;color:var(--ink-2);margin:0;padding-bottom:.12em;text-wrap:pretty}
.text + .text{margin-top:12px}
.quote{font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--quote-fs);line-height:1.2;color:var(--ink);margin:0;text-wrap:balance}
.aphorism-title{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:var(--aphorism-title-fs,clamp(24px,7.2vw,38px));line-height:.98;letter-spacing:-.018em;
  align-self:center;width:100%;color:var(--ink);margin:0 0 16px;padding-bottom:10px;text-align:center;
  border-bottom:1px solid color-mix(in srgb,var(--muted) 38%,transparent);
  text-wrap:balance
}
.card[data-content-density="very-dense"] .byline{margin-top:10px}
.card[data-content-density="very-dense"] .source{margin-top:10px;padding-top:6px;line-height:1.3}
.card[data-content-density="very-dense"] .aphorism-title{margin-bottom:10px;padding-bottom:7px}
.card.content-fitted .reaction-cluster{margin-top:5px}
.byline{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--body);margin-top:18px}
.concept-link{display:inline;margin:0;padding:0;border:0;background:none;color:color-mix(in srgb,var(--accent) 42%,currentColor);font:inherit;line-height:inherit;letter-spacing:inherit;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:color .16s ease,opacity .16s ease}
.concept-link:hover{color:var(--accent)}
.concept-link:focus-visible{color:var(--accent);outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
.concept-link:active{opacity:.62}
.concept-link.concept-link-picked{color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 15%,transparent);border-radius:3px;animation:concept-picked .72s ease both}
@keyframes concept-picked{0%{filter:brightness(1);transform:translateY(0)}28%{filter:brightness(.72);transform:translateY(-1px)}100%{filter:brightness(1);transform:translateY(0)}}
.word-punctuation-lock{display:inline-block;white-space:nowrap}
.title .concept-link,.aphorism-title .concept-link{color:inherit}
.title .concept-link:hover,.title .concept-link:focus-visible,.aphorism-title .concept-link:hover,.aphorism-title .concept-link:focus-visible{color:var(--accent)}
.editorial-emphasis{font-weight:600;color:var(--ink)}
.editorial-parenthesis{font-family:var(--display);font-style:italic;color:color-mix(in srgb,var(--ink) 78%,var(--accent))}
.editorial-turn{font-family:var(--display);font-style:italic;font-weight:500;color:var(--accent);padding:0 .06em}
.body em:not(.concept-link){color:color-mix(in srgb,var(--body) 88%,var(--accent));opacity:.9}
.card[data-text-length="short"] .text{line-height:1.38}
.card[data-text-length="long"] .editorial-emphasis{font-weight:550}
.prompt-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--accent);margin-bottom:10px}
.source{margin-top:18px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--muted) 42%,transparent);font-family:var(--mono);font-size:9.5px;line-height:1.45;letter-spacing:.025em;color:var(--muted)}
.source-citation{min-width:0;white-space:pre-line}

/* kart alt aksiyon çubuğu */
.reaction-cluster{display:grid;grid-template-columns:50px 50px;align-items:center;justify-content:end;column-gap:8px;width:108px;min-width:108px;margin-top:9px;margin-left:auto;align-self:flex-end}
.actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:13px;padding-top:3px}
.actions button{width:auto;min-width:22px;height:28px;background:none;border:0;color:rgba(23,19,15,.72);padding:2px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:9px}
.actions button:active{transform:scale(.88)}
.actions button.on{background:none;color:var(--accent)}
.reaction-btn{position:relative;min-width:50px;width:50px;height:50px;padding:6px;border:0;border-radius:50%;background:transparent;color:rgba(23,19,15,.72);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.reaction-btn svg{width:33px;height:33px;overflow:visible;fill:transparent;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;transition:fill .2s ease,color .2s ease,transform .2s ease}
.reaction-btn:hover{background:rgba(23,19,15,.035)}
.reaction-btn:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.reaction-btn.on.like{color:var(--accent)}
.reaction-btn.on.like svg{fill:var(--accent)}
.reaction-btn.dislike.on{color:#17130f}
.reaction-btn.dislike.on svg{fill:#17130f}
.reaction-btn .heart-break{opacity:0;stroke:var(--card-bg);stroke-width:1.8;fill:none;transition:opacity .12s ease}
.reaction-btn.dislike.on .heart-break{opacity:1}
.reaction-btn .reaction-count{position:absolute;right:-2px;bottom:2px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:9px;background:color-mix(in srgb,var(--card-bg) 88%,white);box-shadow:0 0 0 1px color-mix(in srgb,currentColor 22%,transparent);font-family:var(--mono);font-size:8px;line-height:1;color:currentColor;font-variant-numeric:tabular-nums}
.reaction-btn.pulse svg{animation:heart-soft-pulse .42s cubic-bezier(.2,.75,.25,1)}
.reaction-btn.invite-love svg{animation:love-invite 1.25s ease-in-out infinite}
.utility-actions .share-invite{animation:share-invite 1.15s ease-in-out infinite;color:var(--accent)}
@keyframes heart-soft-pulse{0%{transform:scale(1)}42%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes love-invite{0%,100%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}50%{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 66%,transparent));transform:scale(1.11)}}
@keyframes share-invite{0%,100%{filter:drop-shadow(0 0 0 transparent);transform:translateY(0)}50%{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 58%,transparent));transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.reaction-btn.pulse svg,.reaction-btn.invite-love svg,.utility-actions .share-invite,.hmeta .timer.milestone,.save-star.hold-progress,.logo-loop-copy{animation:none}.logo-loop-copy-2{opacity:1;transform:translate(-50%,-50%)}.saved-feed{transition-duration:.01ms}}
.actions .utility-icon{font-family:Arial,sans-serif;font-size:20px;line-height:1;display:inline-grid;place-items:center;width:22px;height:22px}
.actions .utility-icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.actions .utility-icon.copy-icon{font-size:20px}
.actions .hint{font-family:var(--display);font-style:italic;font-size:13px;color:var(--muted)}
.recall-card .body{justify-content:center}
.recall-card .title{font-size:clamp(38px,11vw,58px)}
.recall-card .text{font-family:var(--display);font-style:italic;font-size:clamp(22px,6vw,30px);line-height:1.34}
.recall-actions{justify-content:flex-start}
.card-nudge{min-height:18px;margin-top:2px;font-family:var(--display);font-style:italic;font-size:14px;line-height:1.2;text-align:right;color:var(--muted);opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease}
.card-nudge.show{opacity:1;transform:translateY(0)}

/* ===================== PANELLER (ayar / kayıt) ===================== */
.panel{position:absolute;inset:0;z-index:15;background:rgba(236,228,210,.98);
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);
  transform:translateX(102%);transition:transform .34s cubic-bezier(.22,.78,.2,1);
  will-change:transform;box-shadow:-18px 0 38px -24px rgba(28,22,14,.65)}
.panel.open{transform:translateX(0)}
.panel .ph{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--ink)}
.panel .ph h2{font-family:var(--display);font-style:italic;font-weight:600;font-size:26px;margin:0;color:var(--ink)}
.panel .ph button{background:none;border:0;color:var(--body);border-radius:0;padding:6px;font-size:11px}
.panel .pb{flex:1;overflow-y:auto;padding:18px}
#settings{touch-action:none}
.sect{margin-bottom:26px}
.sect > .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--muted);margin-bottom:12px}
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats label{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--body);border:1px solid var(--faint);padding:8px 11px;border-radius:2px;display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.cats label.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cats input{display:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.row .lab{font-size:16px;color:var(--ink-2)}
input[type=range]{accent-color:var(--ink)}
.link-btn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;background:none;border:1px solid var(--body);color:var(--body);padding:10px 12px;border-radius:2px;width:100%;text-align:center;margin-bottom:10px}
.link-btn.archive-link{border-color:#9a6a16;color:#7f5712;background:rgba(242,228,173,.48)}
.room-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.room-shortcuts .link-btn{min-height:44px}
.link-btn.flow-link{border-color:var(--body);color:var(--body);background:rgba(255,255,255,.2)}
.link-btn.danger{border-color:var(--err);color:var(--err)}
.link-btn:disabled{opacity:.38;cursor:default}
.reset-zone{margin-top:34px;padding-top:24px;opacity:.82}
.reset-warning{margin:0 0 12px;font-family:var(--display);font-style:italic;font-size:15px;line-height:1.35;color:var(--err)}
.reset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
.reset-action{min-width:0}
.reset-action .link-btn{width:100%;min-height:48px;margin-bottom:6px;padding:9px 7px;font-size:9px;line-height:1.35}
.link-btn.irreversible{border-color:var(--ink);background:var(--ink);color:var(--paper);animation:irreversible-arrive .24s ease-out}
@keyframes irreversible-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.saved-item{border-bottom:1px solid var(--faint);padding:14px 0;cursor:pointer}
.saved-item .st{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:var(--muted);margin-bottom:5px}
.saved-item .sq{font-family:var(--display);font-style:italic;font-size:19px;line-height:1.2;color:var(--ink)}
.saved-item .sx{font-size:14px;color:var(--body);margin-top:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty{font-family:var(--display);font-style:italic;font-size:20px;color:var(--muted);text-align:center;margin-top:40px}
.about{font-size:14px;line-height:1.6;color:var(--body)}
.about b{color:var(--ink)}
.usage-notes{display:flex;flex-direction:column;gap:10px}
.usage-notes p{font-size:14.5px;line-height:1.48;color:var(--body);margin:0}
.usage-notes b{font-weight:600;color:var(--ink)}
.transparency-note{border:1px solid color-mix(in srgb,var(--muted) 42%,transparent);padding:14px;background:rgba(255,255,255,.18)}
.transparency-note p{font-family:var(--display);font-style:italic;font-size:17px;line-height:1.45;color:var(--ink);margin:0}
.account-email{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--muted);overflow-wrap:anywhere;margin:0 0 12px}
.membership-status{min-height:1.3em;margin:-2px 0 12px;font-family:var(--mono);font-size:9px;line-height:1.4;color:var(--muted)}
.membership-button{border-color:var(--ink);background:rgba(255,255,255,.24);color:var(--ink)}
.reminder-row{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.reminder-row>span{display:flex;flex-direction:column;gap:4px}
.reminder-row b{font-family:var(--serif);font-size:15px;font-weight:500;color:var(--ink)}
.reminder-row small{font-family:var(--mono);font-size:8.5px;line-height:1.45;color:var(--muted)}
.reminder-row input{width:34px;height:18px;accent-color:var(--ink);flex:0 0 auto}
.reminder-status{font-family:var(--mono);font-size:8.5px;color:var(--muted);margin-top:8px}
.author-link{display:block;width:100%;border-top:1px solid color-mix(in srgb,var(--muted) 45%,transparent);padding-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--ink);text-decoration:none}
.author-link + .author-link{margin-top:12px}
.search-panel-body{display:flex;flex-direction:column;gap:15px}
.search-field{display:flex;flex-direction:column;gap:7px}
.search-field span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--muted)}
.search-field input{width:100%;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:rgba(255,255,255,.2);color:var(--ink);padding:12px 10px;font-family:var(--display);font-size:21px;outline:none;-webkit-appearance:none}
.search-field input:focus{border-bottom-color:#9a6a16;box-shadow:0 5px 10px -10px #9a6a16}
.search-results{display:flex;flex-direction:column;min-height:80px}
.search-status{font-family:var(--display);font-style:italic;font-size:18px;line-height:1.35;color:var(--muted);padding:20px 4px}
.search-result{display:grid;grid-template-columns:1fr auto;gap:5px 12px;width:100%;padding:13px 4px;border:0;border-bottom:1px solid color-mix(in srgb,var(--muted) 38%,transparent);background:none;color:var(--ink);text-align:left}
.search-result-title{font-family:var(--display);font-style:italic;font-size:20px;line-height:1.08}
.search-result-context{grid-column:1;font-family:var(--body);font-size:12px;line-height:1.35;color:color-mix(in srgb,var(--ink) 76%,var(--muted));overflow-wrap:anywhere}
.search-result-meta{grid-column:1;font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--muted)}
.search-result-arrow{grid-column:2;grid-row:1 / span 3;align-self:center;font-family:var(--mono);font-size:13px;color:#9a6a16}

/* kartlardan bağımsız, kategori bandının hemen altında duran hayalet ikaz */
#toast{position:absolute;left:14px;right:38px;width:auto;max-height:64px;overflow:hidden;
  z-index:30;background:rgba(28,26,22,.94);color:var(--paper);font-family:var(--mono);font-size:10.5px;
  line-height:1.42;letter-spacing:.04em;padding:9px 14px;border-left:3px solid var(--gold);border-radius:3px;
  opacity:0;visibility:hidden;pointer-events:none;text-align:left;transform:translate3d(0,-7px,0) scale(.992);
  transition:opacity .46s ease,transform .46s cubic-bezier(.2,.72,.25,1),visibility 0s linear .46s;
  will-change:opacity,transform;contain:paint;box-shadow:0 8px 20px -15px rgba(15,12,8,.7)}
#toast.show{opacity:.96;visibility:visible;transform:translate3d(0,0,0) scale(1);transition-delay:0s}
#toast.show.leaving{opacity:0;transform:translate3d(0,-5px,0) scale(.995)}
#app.archive-open #toast{left:38px;right:14px}
@media (prefers-reduced-motion:reduce){#toast{transition-duration:.12s;will-change:auto}}
@media (pointer:coarse){
  header{backdrop-filter:none}
  .card .paper{mix-blend-mode:normal;opacity:.08}
  .card .bg::after{background:linear-gradient(96deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 8%,transparent) 16%,transparent 42%,color-mix(in srgb,var(--accent) 3%,transparent));border-left:4px solid color-mix(in srgb,var(--accent) 48%,transparent);box-shadow:inset 17px 0 28px color-mix(in srgb,var(--accent) 7%,transparent)}
  .concept-link{transition:none}
}