/* Sarmal v1.0.0 | Geliştirici: Atakan Mazıbaşı */
/* Yalnızca telefon ve küçük tablet (768 px ve altı): uygulama gibi tek kolon. */
html { scroll-padding-top: 110px; }
.rail, .side { display: none; }
.shell { display: block; }
.feed { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

.appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: env(safe-area-inset-top) .9rem 0; background: #f6faf4f2; backdrop-filter: blur(14px); }
.appbar-logo { display: flex; align-items: center; gap: .45rem; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.appbar-actions { display: flex; }
.appbar-actions a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.2rem; }
.appbar-actions .dot { position: absolute; top: 3px; right: 2px; }

.bar { top: 52px; min-height: 46px; padding-block: .25rem; }
.tabs a { min-height: 44px; font-size: .9rem; }
.tabs a span { padding: .65rem .1rem; }
.back { width: 44px; height: 44px; margin-left: -.5rem; }

.tabbar { position: fixed; inset: auto 0 0; z-index: 30; display: flex; padding-bottom: env(safe-area-inset-bottom); background: #fffffff5; backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabbar a { position: relative; flex: 1; display: grid; place-items: center; height: 56px; color: var(--muted); font-size: 1.25rem; -webkit-tap-highlight-color: transparent; }
.tabbar a[aria-current] { color: var(--ink); }
.tabbar a[aria-current] .avatar { box-shadow: 0 0 0 2px var(--accent); }
.tabbar .dot { position: absolute; top: 7px; left: calc(50% + 5px); }
.tab-write i { display: grid; place-items: center; width: 44px; height: 34px; border-radius: 12px; background: var(--ink); color: var(--accent-hover); font-size: 1rem; }

/* Görseller kenardan kenara, Instagram gibi */
.card { margin: 0 .6rem .75rem; padding: .85rem .85rem .5rem; }
.card h2 { font-size: 1.28rem; }
.card-media { margin-inline: -.85rem; border-radius: 0; }
.card-media img { aspect-ratio: 4 / 3; }
.card-foot { flex-wrap: wrap; }
.act { min-width: 44px; height: 44px; }
.spotlight { margin: .25rem .6rem .5rem; }
.spotlight > img { aspect-ratio: 4 / 3; }
.resume, .announce { margin-inline: .6rem; }
.chips, .timeline, .tag-cloud, .section-title { margin-inline: .85rem; }
.topic-grid { padding-inline: .6rem; gap: .5rem; }
.article { margin: .6rem .6rem 0; }

.grid { gap: 2px; }
.grid-over { display: none !important; }

.profile { gap: .9rem; padding: 1rem .85rem; flex-wrap: wrap; }
.profile > .avatar.big { width: 76px; height: 76px; font-size: 1.6rem; }
.profile-actions .btn, .profile-actions form { flex: 1 1 auto; }
.profile-actions form .btn { width: 100%; }
.stats { gap: 1rem; }

.article { padding: .85rem; }
.post-cover { border-radius: 14px 4px 14px 4px; }
.prose { font-size: 1.05rem; }
.comment.reply-item { margin-left: 1.9rem; }
.mini { min-height: 36px; }

/* Yazı sayfasında beğen ve kaydet başparmak mesafesinde kalır */
.post-actions { position: sticky; bottom: calc(57px + env(safe-area-inset-bottom)); z-index: 10; margin-inline: -.85rem; padding: .1rem .5rem; background: #fffffff2; backdrop-filter: blur(10px); border-block: 1px solid var(--line); }

.form-page { padding: .85rem; }
.stack .btn { justify-self: stretch; }

.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.auth-art { display: none; }

.notice { margin: .6rem .85rem; }
.toast { bottom: calc(68px + env(safe-area-inset-bottom)); }

.appbar-logo img { height: 46px; width: auto; }

/* Bahçe akışı telefonda: yaprak çizgisi yerine kenarda biçim rengi */
.garden { margin: .5rem .6rem; padding: 1.1rem 1rem .9rem; }
.composer-row { flex-wrap: wrap; }
.item { margin: 0 .6rem .75rem; }
.item.read { box-shadow: inset 4px 0 0 var(--type-read); padding: .9rem .9rem .45rem 1.05rem; }
.item.read h2 { font-size: 1.22rem; }
.thumb img { width: 84px; height: 84px; }
.item.read .item-foot { flex-wrap: wrap; }
.item.photo { box-shadow: inset 0 4px 0 var(--type-photo); }
.item.sprout { box-shadow: inset 4px 0 0 var(--type-sprout); padding: .8rem .9rem .4rem; }
.sprout-text { font-size: 1.05rem; }
.showcase { margin: 0 .6rem .75rem; padding: .85rem; }
.garden::before { width: 110px; height: 110px; right: -40px; top: -40px; }
.garden::after { display: none; }
.spotlight > img { aspect-ratio: 16 / 10; }