/* archived — yüklenirken görünen iskeletler ve görsellerin yumuşak belirmesi
   Amaç: veri gelene kadar sahte isim / "Yükleniyor…" yazısı yerine kartların gerçek boyutunda sakin bir yer tutucu göstermek; veri gelince sayfa zıplamaz. */
:root{--sk-a:var(--cream-deep);--sk-b:color-mix(in srgb,var(--cream-deep) 35%,var(--surface))}
.sk-l,.sk-av,.sk-num,.slip.sk,.frame.sk .mat,.issue.sk .cover,.blog-card.sk .bc-cover,.entry.sk{background:linear-gradient(90deg,var(--sk-a),var(--sk-b),var(--sk-a));background-size:200% 100%;animation:skl 1.4s linear infinite}
.sk-l{display:block;height:13px;border-radius:8px;margin:7px 0}
.sk-l.tall{height:22px}.w25{width:25%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w80{width:80%}.w100{width:100%}
.sk-av{display:block;flex:none;width:44px;height:44px;border-radius:50%}
.sk-num{display:inline-block;min-width:26px;height:.9em;border-radius:6px;color:transparent!important;vertical-align:-1px}
.loading-lines{display:grid;gap:6px;padding:10px 0;max-width:420px}
.slip.sk{display:block;min-height:170px;padding:22px 20px;border:1px solid var(--line);transform:none!important;animation:none;background:var(--surface)}
.slip.sk .sk-l{background:linear-gradient(90deg,var(--sk-a),var(--sk-b),var(--sk-a));background-size:200% 100%;animation:skl 1.4s linear infinite}
.frame.sk .mat{min-height:160px;border-radius:14px}
.frame.sk,.issue.sk,.blog-card.sk,.entry.sk,.conversation-row.sk{pointer-events:none}
.frame.sk .plaque,.issue.sk .issue-meta{padding-top:8px}
.issue.sk .cover{aspect-ratio:3/4;border-radius:10px}
.blog-card.sk{cursor:default;box-shadow:none}.blog-card.sk:hover{transform:none;box-shadow:none}
.blog-card.sk .bc-cover{animation-duration:1.4s}
.blog-card.sk .bc-body .sk-l{background:linear-gradient(90deg,var(--sk-a),var(--sk-b),var(--sk-a));background-size:200% 100%;animation:skl 1.4s linear infinite}
.entry.sk{min-height:84px;border-radius:18px;padding:16px;background:var(--surface);border:1px solid var(--line);animation:none}
.conversation-row.sk,.person-row.sk{display:flex;align-items:center;gap:12px;padding:12px}
.conversation-row.sk span,.person-row.sk span{flex:1;display:block}
/* görseller: yüklenene kadar kutu iskelet renginde, sonra yumuşakça belirir */
img[data-ld]{opacity:0;transition:opacity .35s ease}
img[data-ld].loaded{opacity:1}
.mat:has(img[data-ld]:not(.loaded)),.cover:has(img[data-ld]:not(.loaded)),.bc-cover:has(img[data-ld]:not(.loaded)),.article-cover:has(img[data-ld]:not(.loaded)){background:linear-gradient(90deg,var(--sk-a),var(--sk-b),var(--sk-a));background-size:200% 100%;animation:skl 1.4s linear infinite}
/* çok içerikte sistemi yormasın: ekran dışındaki kartlar çizilmez (yalnızca yerleri ayrılır) */
.post,.entry,.person-row{content-visibility:auto;contain-intrinsic-size:auto 280px}
.entry{contain-intrinsic-size:auto 120px}.person-row{contain-intrinsic-size:auto 64px}
@media (prefers-reduced-motion:reduce){.sk-l,.sk-av,.sk-num,.slip.sk,.frame.sk .mat,.issue.sk .cover,.blog-card.sk .bc-cover,.entry.sk,img[data-ld]{animation:none!important;transition:none!important}}
[data-motion="reduce"] .sk-l,[data-motion="reduce"] .sk-av,[data-motion="reduce"] .sk-num{animation:none}

/* ---- nabız: iskelet "parıldamak" yerine yavaşça soluk alır ----
   Tek bir opacity animasyonu kapsayıcıda döner (GPU'da, yeniden boyama yok); içerideki çubuklar düz renktir.
   Çok sayıda iskelet aynı anda göründüğünde bile işlemciyi yormaz. */
:root{--sk-t:1.8s}
@keyframes skp{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes skbg{0%,100%{background-color:var(--sk-a)}50%{background-color:var(--sk-b)}}
.sk-l,.sk-av,.sk-num,.slip.sk .sk-l,.blog-card.sk .bc-body .sk-l,.blog-card.sk .bc-cover,.frame.sk .mat,.issue.sk .cover,.slip.sk,.entry.sk{background:var(--sk-a);background-image:none;animation:none}
.slip.sk,.frame.sk,.issue.sk,.blog-card.sk,.entry.sk,.conversation-row.sk,.person-row.sk,.skeleton,.loading-lines{animation:skp var(--sk-t) ease-in-out infinite}
.slip.sk,.entry.sk{background:var(--surface)}
.mat:has(img[data-ld]:not(.loaded)),.cover:has(img[data-ld]:not(.loaded)),.bc-cover:has(img[data-ld]:not(.loaded)),.article-cover:has(img[data-ld]:not(.loaded)){background:var(--sk-a);background-image:none;animation:skbg var(--sk-t) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.slip.sk,.frame.sk,.issue.sk,.blog-card.sk,.entry.sk,.conversation-row.sk,.person-row.sk,.skeleton,.loading-lines,.mat:has(img[data-ld]:not(.loaded)),.cover:has(img[data-ld]:not(.loaded)){animation:none!important}}
[data-motion="reduce"] .slip.sk,[data-motion="reduce"] .frame.sk,[data-motion="reduce"] .issue.sk,[data-motion="reduce"] .blog-card.sk,[data-motion="reduce"] .skeleton{animation:none}

/* ---- sarmal yükleyici: noktalar dışarıdan merkeze doğru döner ----
   Renkler paletten gelir (tema değişince o da değişir). Boyut --s ile verilir; .sp-sm düğme içi, .sp-lg sayfa ortası. */
.sp{--c1:var(--wine);--c2:var(--rose,#f6a5bd);--s:72px;--k:1;position:relative;display:inline-block;flex:none;width:calc(var(--s)*1.3);height:calc(var(--s)*1.3)}
.sp i{position:absolute;left:50%;top:50%;width:calc(var(--s)/8);height:calc(var(--s)/8);margin:calc(var(--s)/-16);border-radius:50%;background:var(--c1);opacity:0;animation:sp-spin calc(2.5s/var(--k)) cubic-bezier(.4,0,.6,1) infinite;animation-delay:calc(var(--i)*-.25s/var(--k))}
.sp i:nth-child(2n){background:var(--c2)}
.sp-sm{--s:16px;width:22px;height:22px;vertical-align:middle}.sp-sm i{min-width:2px;min-height:2px}
.sp-md{--s:34px}
@keyframes sp-spin{0%{transform:rotate(0) translateX(calc(var(--s)*.65)) scale(1);opacity:0}15%{opacity:1}100%{transform:rotate(540deg) translateX(0) scale(.2);opacity:0}}
.btn .sp,.dock-btn .sp{--c1:currentColor;--c2:currentColor}
/* açılış perdesi: uygulama ilk çizimini yapana kadar sarmal gösterir */
#boot{position:fixed;inset:0;z-index:300;display:grid;place-items:center;align-content:center;gap:10px;background:var(--bg-boot,#fff7f4);transition:opacity .4s ease,visibility .4s}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
#boot b{font:400 30px/1 var(--display,var(--serif));color:var(--ink,#2c2230);letter-spacing:-.5px}
@media (prefers-reduced-motion:reduce){.sp i{animation:none;opacity:.8}.sp i:nth-child(n+4){display:none}#boot{transition:none}}
[data-motion="reduce"] .sp i{animation:none;opacity:.8}

/* ---- açılış: tam ekran perde yerine üstte ince bir ilerleme çizgisi ----
   Sayfa arkada hemen görünür; çizgi uygulama ilk çizimini yapınca kaybolur. */
#boot{inset:0 0 auto 0;height:3px;display:block;background:color-mix(in srgb,var(--wine,#7a2e3b) 18%,transparent);overflow:hidden;pointer-events:none}
#boot b,#boot .sp{display:none}
#boot::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;border-radius:3px;background:var(--wine,#7a2e3b);animation:boot-bar 1.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes boot-bar{to{left:100%}}
@media (prefers-reduced-motion:reduce){#boot::after{animation:none;left:0;width:60%}}
[data-motion="reduce"] #boot::after{animation:none;left:0;width:60%}