için gerekli | (yorumlar ekranında bir tane var). Hücrelerde geri alınıyor ve aynı | görünüm satır içi kutularla elde ediliyor: sağa yaslı, aralarında | boşluk, gerektiğinde alt satıra kayan. */ td.table__actions { display: table-cell; text-align: right; } td.table__actions > *, td.table__actions > form { display: inline-block; margin: 0; vertical-align: middle; } td.table__actions > * + * { margin-left: 0.3rem; } .table__actions form { margin: 0; } .num, .table .num { text-align: right; font-variant-numeric: tabular-nums; } /* 8. Rozetler ------------------------------------------------------------- */ /* Hap değil, yumuşak köşeli küçük etiket — Trendyol'un durum rozeti. */ body.admin .badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border: 0; border-radius: 3px; background: var(--y-notr-bg); color: var(--y-metin-soluk); font-size: 0.6875rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } body.admin .badge--ok { background: var(--y-ok-bg); color: var(--y-ok); } body.admin .badge--warn { background: var(--y-uyari-bg); color: var(--y-uyari); } body.admin .badge--danger { background: var(--y-tehlike-bg); color: var(--y-tehlike); } body.admin .badge--muted { background: var(--y-notr-bg); color: var(--y-metin-silik); } .swatch { display: inline-block; width: 13px; height: 13px; margin-right: 0.3rem; border: 1px solid var(--y-kenar-koyu); border-radius: 50%; background: var(--swatch, #ccc); vertical-align: -2px; } /* 9. Düğmeler ------------------------------------------------------------- */ body.admin .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 34px; padding: 0 0.75rem; border: 1px solid var(--y-kenar-koyu); border-radius: var(--y-yaricap); background: var(--y-yuzey); color: var(--y-metin); font-family: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--y-gecis), border-color var(--y-gecis), color var(--y-gecis); } body.admin .btn:hover { background: var(--y-yuzey-alt); border-color: var(--y-metin-silik); text-decoration: none; } body.admin .btn:disabled { opacity: 0.5; cursor: not-allowed; } body.admin .btn--primary { background: var(--y-vurgu); border-color: var(--y-vurgu); color: var(--y-vurgu-metin); } body.admin .btn--primary:hover { background: var(--y-vurgu-koyu); border-color: var(--y-vurgu-koyu); color: var(--y-vurgu-metin); } body.admin .btn--sm { min-height: 28px; padding: 0 0.55rem; font-size: 0.75rem; } body.admin .btn--ghost { background: transparent; border-color: transparent; color: var(--y-baglanti); } body.admin .btn--ghost:hover { background: var(--y-vurgu-acik); border-color: transparent; } body.admin .btn--danger { border-color: var(--y-tehlike-kenar); background: var(--y-yuzey); color: var(--y-tehlike); } body.admin .btn--danger:hover { background: var(--y-tehlike); border-color: var(--y-tehlike); color: var(--y-ters-metin); } /* 10. Bildirim şeritleri --------------------------------------------------- */ .flash { margin: 1rem 1rem 0; padding: 0.65rem 0.9rem; border: 1px solid transparent; border-radius: var(--y-yaricap); font-size: 0.8125rem; } .flash--ok { background: var(--y-ok-bg); border-color: var(--y-ok-kenar); color: var(--y-ok); } .flash--error { background: var(--y-tehlike-bg); border-color: var(--y-tehlike-kenar); color: var(--y-tehlike); } .flash ul { margin: 0.3rem 0 0; padding-left: 1.1rem; color: inherit; font-size: 0.8125rem; } body.admin .callout { padding: 0.7rem 0.9rem; border: 1px solid var(--y-kenar); border-left: 3px solid var(--y-vurgu); border-radius: var(--y-yaricap); background: var(--y-yuzey-alt); color: var(--y-metin-soluk); font-size: 0.8125rem; } .toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 90; transform: translateX(-50%); padding: 0.6rem 1rem; border-radius: var(--y-yaricap); background: var(--y-metin); color: var(--y-ters-metin); font-size: 0.8125rem; box-shadow: var(--y-golge-lg); } /* 11. Tanım listeleri ve satır listeleri ---------------------------------- */ .detail-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } .detail { display: grid; gap: 0.6rem; margin: 0; } .detail dt { color: var(--y-metin-silik); font-size: 0.75rem; font-weight: 400; text-transform: none; letter-spacing: 0; } .detail dd { margin: 0.1rem 0 0; font-size: 0.8125rem; line-height: 1.55; } .order-lines { display: grid; margin: 0 0 0.6rem; padding: 0; list-style: none; font-size: 0.8125rem; } .order-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--y-kenar); } .order-lines li:last-child { border-bottom: 0; } .order-lines li > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } .summary__line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: 0.8125rem; } .summary__line--rule, .summary__line--total { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px solid var(--y-kenar); } .summary__line--total { font-weight: 700; } /* 12. Giriş ekranı -------------------------------------------------------- */ .admin--login { display: grid; place-items: center; min-height: 100vh; padding: 2rem 1rem; background: var(--y-bg); } .login-box { width: min(24rem, 100%); padding: 1.5rem; border: 1px solid var(--y-kenar); border-radius: var(--y-yaricap-lg); background: var(--y-yuzey); box-shadow: var(--y-golge); } .login-box .admin-brand { min-height: 0; padding: 0 0 0.75rem; border-bottom: 0; } .login-box .admin-title { margin-bottom: 1rem; font-size: 1.15rem; } .login-box .form { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.75rem; } .login-box .btn { width: 100%; min-height: 40px; } .login-box__foot { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--y-kenar); color: var(--y-metin-soluk); font-size: 0.8125rem; } /* 13. Duyarlı davranış ---------------------------------------------------- */ @media (min-width: 960px) { .admin-shell { grid-template-columns: var(--y-yan) 1fr; } .admin-side { position: sticky; top: 0; height: 100vh; padding: 0; border-bottom: 0; border-right: 1px solid var(--y-kenar); overflow-y: auto; } .admin-side__foot { margin-top: auto; } .admin-head { padding: 0.5rem 1.25rem; } .admin-head ~ * { margin-inline: 1.25rem; } } /* Dar ekranda kenar çubuğu üstte yatay bir şeride dönüşür. */ @media (max-width: 959px) { .admin-side { padding: 0 0 0.5rem; } .admin-brand { min-height: 48px; } .admin-nav { grid-auto-flow: column; grid-auto-columns: max-content; gap: 0.35rem; overflow-x: auto; scroll-snap-type: x proximity; padding: 0.5rem 1rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .admin-nav a { scroll-snap-align: start; min-height: 34px; padding: 0.35rem 0.7rem; border: 1px solid var(--y-kenar); border-radius: var(--y-yaricap); white-space: nowrap; } .admin-nav a[aria-current="page"] { border-color: var(--y-vurgu); box-shadow: none; } .admin-side__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0; } .admin-side__tema, .admin-side__logout { margin: 0; padding: 0; flex: 1 1 auto; } .admin-side__tema .btn, .admin-side__logout .btn { width: 100%; } .admin-head { position: static; } } /* Yazdırma: kenar çubuğu ve düğmeler kâğıda basılmaz. */ @media print { .admin-side, .admin-head .btn, .table__actions { display: none; } .panel { border: 0; box-shadow: none; break-inside: avoid; } }