:root { --xy-primary: #e8501c; --xy-primary-dark: #c43f12; --xy-ink: #1f2430; --xy-muted: #6b7280; --xy-bg: #f5f6fa; --xy-sidebar: #151a29; --bs-primary: #e8501c; --bs-primary-rgb: 232, 80, 28; --bs-link-color: #c43f12; --bs-link-hover-color: #a03210; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--xy-ink); background: var(--xy-bg); } .btn-primary { --bs-btn-bg: var(--xy-primary); --bs-btn-border-color: var(--xy-primary); --bs-btn-hover-bg: var(--xy-primary-dark); --bs-btn-hover-border-color: var(--xy-primary-dark); --bs-btn-active-bg: var(--xy-primary-dark); --bs-btn-active-border-color: var(--xy-primary-dark); --bs-btn-disabled-bg: var(--xy-primary); --bs-btn-disabled-border-color: var(--xy-primary); } .btn-outline-primary { --bs-btn-color: var(--xy-primary); --bs-btn-border-color: var(--xy-primary); --bs-btn-hover-bg: var(--xy-primary); --bs-btn-hover-border-color: var(--xy-primary); --bs-btn-active-bg: var(--xy-primary); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--xy-primary); color: #fff; font-weight: 800; } .card { border: 0; border-radius: 14px; } .card.shadow-sm { box-shadow: 0 2px 10px rgba(20, 25, 50, .06) !important; } .table > :not(caption) > * > * { padding-top: .7rem; padding-bottom: .7rem; } /* Panel kabuğu */ .app-shell { display: flex; min-height: 100vh; } .app-sidebar { width: 252px; background: var(--xy-sidebar); color: #cbd2e1; flex: 0 0 252px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1040; transition: transform .2s; } .sidebar-brand { padding: 1.2rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .06); } .sidebar-brand a { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; display: flex; align-items: center; gap: .6rem; } .sidebar-nav { padding: .75rem .6rem 2rem; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav .nav-header { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; color: #6f7a96; padding: 1rem .8rem .3rem; } .sidebar-nav .nav-link { color: #cbd2e1; border-radius: 9px; padding: .55rem .8rem; display: flex; align-items: center; gap: .7rem; font-size: .92rem; } .sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; } .sidebar-nav .nav-link.active { background: var(--xy-primary); color: #fff; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-topbar { background: #fff; height: 60px; display: flex; align-items: center; padding: 0 1.25rem; gap: .75rem; border-bottom: 1px solid #e8eaf0; position: sticky; top: 0; z-index: 1030; } .topbar-title { font-weight: 600; color: var(--xy-muted); } .app-content { padding: 1.5rem; flex: 1; } .notif-menu { width: 320px; max-height: 420px; overflow-y: auto; } .sidebar-backdrop { display: none; } @media (max-width: 991.98px) { .app-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); } body.sidebar-open .app-sidebar { transform: none; } body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1035; } .app-content { padding: 1rem; } } .stat-card .stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .stat-card .stat-value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; } .chart-box { position: relative; height: 280px; } /* DataTable */ .xt-card .card-body { padding: 1rem; } td.select-checkbox, th.select-checkbox { position: relative; cursor: pointer; } td.select-checkbox:before { content: ""; display: inline-block; width: 16px; height: 16px; border: 1.5px solid #9aa3b5; border-radius: 4px; margin-top: 2px; background: #fff; } tr.selected td.select-checkbox:before { background: var(--xy-primary); border-color: var(--xy-primary); } tr.selected td.select-checkbox:after { content: "✓"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); color: #fff; font-size: 12px; font-weight: 700; } table.dataTable tbody tr.selected > * { box-shadow: inset 0 0 0 9999px rgba(232, 80, 28, .07); color: inherit; } .dataTables_wrapper .dataTables_filter input { margin-left: .4rem; } .dt-buttons .btn { margin-right: .25rem; } .dropdown-menu .dropdown-item i { width: 1.1em; } /* Müşteri sitesi */ .site-header { background: #fff; border-bottom: 1px solid #ececf2; z-index: 1030; } .site-footer { background: #fff; border-top: 1px solid #ececf2; color: var(--xy-muted); } .hero { background: linear-gradient(120deg, #e8501c, #ff8a4c); color: #fff; border-radius: 20px; padding: 2.5rem 1.5rem; } .hero h1 { font-weight: 800; } .cat-card { background: #fff; border-radius: 16px; padding: 1.1rem .5rem; text-align: center; transition: transform .15s, box-shadow .15s; display: block; color: inherit; text-decoration: none; } .cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(20, 25, 50, .1); color: inherit; } .cat-card i { font-size: 1.9rem; color: var(--xy-primary); } .biz-card { background: #fff; border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: box-shadow .15s; } .biz-card:hover { box-shadow: 0 8px 22px rgba(20, 25, 50, .12); color: inherit; } .biz-cover { height: 130px; background: linear-gradient(135deg, #ffd9c7, #ffb089); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #fff; position: relative; background-size: cover; background-position: center; } .biz-cover.closed::after { content: "Kapalı"; position: absolute; inset: 0; background: rgba(20, 25, 40, .55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; } .product-row { background: #fff; border-radius: 14px; padding: .9rem; display: flex; gap: .9rem; align-items: center; cursor: pointer; border: 1px solid transparent; } .product-row:hover { border-color: var(--xy-primary); } .product-thumb { width: 84px; height: 84px; border-radius: 12px; background: #ffe7da; display: flex; align-items: center; justify-content: center; color: var(--xy-primary); font-size: 1.8rem; flex: 0 0 84px; background-size: cover; background-position: center; } .rating-pill { background: #fff4d6; color: #8a5a00; border-radius: 999px; padding: .1rem .5rem; font-size: .8rem; font-weight: 600; } .sticky-cart { position: sticky; top: 84px; } .order-timeline { list-style: none; padding: 0; margin: 0; } .order-timeline li { position: relative; padding: 0 0 1.1rem 1.6rem; border-left: 2px solid #e1e4ec; margin-left: .5rem; } .order-timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--xy-primary); } /* Auth */ .auth-body { background: linear-gradient(135deg, #fff1ea, #f5f6fa); min-height: 100vh; } .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .auth-card { width: 100%; max-width: 460px; } .auth-card.wide { max-width: 760px; } /* Çok adımlı başvuru */ .step-indicator { display: flex; gap: .5rem; margin-bottom: 1.5rem; } .step-indicator .s { flex: 1; text-align: center; font-size: .8rem; padding: .5rem; border-radius: 10px; background: #eceef4; color: var(--xy-muted); } .step-indicator .s.active { background: var(--xy-primary); color: #fff; } .step-indicator .s.done { background: #d6f2e0; color: #1d7a45; } #applyMap, #pickMap { height: 300px; border-radius: 12px; z-index: 1; } /* Kurye PWA */ .courier-body { background: #f0f2f7; } .courier-app { max-width: 520px; margin: 0 auto; min-height: 100vh; padding-bottom: 76px; } .courier-top { background: var(--xy-primary); color: #fff; padding: 1rem; padding-top: calc(1rem + env(safe-area-inset-top)); border-radius: 0 0 20px 20px; } .courier-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; background: #fff; display: flex; border-top: 1px solid #e3e6ee; padding-bottom: env(safe-area-inset-bottom); z-index: 50; } .courier-nav a { flex: 1; text-align: center; padding: .6rem 0; color: var(--xy-muted); text-decoration: none; font-size: .75rem; } .courier-nav a.active { color: var(--xy-primary); font-weight: 600; } .courier-nav a i { display: block; font-size: 1.35rem; } .task-card { background: #fff; border-radius: 16px; padding: 1rem; margin-bottom: .8rem; box-shadow: 0 2px 8px rgba(20, 25, 50, .06); } .btn-xl { padding: .9rem 1rem; font-size: 1.05rem; border-radius: 14px; } .online-switch { width: 3.2rem; height: 1.7rem; } table.dataTable > tbody > tr > td.dtr-control { cursor: pointer; } table.dataTable.dtr-column > tbody > tr > td.dtr-control:before, table.dataTable.dtr-column > tbody > tr > th.dtr-control:before { top: 50%; left: 50%; height: .9em; width: .9em; margin-top: -.5em; margin-left: -.5em; box-sizing: content-box; line-height: .9em; font-size: .8rem; background-color: var(--xy-primary); } .dataTables_wrapper .dt-buttons { gap: .25rem; } .dataTables_wrapper .dt-buttons .btn { border-radius: 8px !important; } /* ===================================================================== Tasarım sistemi v2 — "X Yemek Arayüz Tasarımı" tuvalinden (Plus Jakarta Sans, mürekkep #16181D, vurgu #D9381E, 44px kontroller, 12px/16–24px yarıçaplar) ===================================================================== */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-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 { --xy-primary: #D9381E; --xy-primary-dark: #B42B14; --xy-ink: #16181D; --xy-muted: #5B5F68; --xy-faint: #8E929B; --xy-bg: #F6F6F4; --xy-panel-bg: #F3F4F6; --xy-surface: #FFFFFF; --xy-chip: #F1F1EE; --xy-line: #E4E4E0; --xy-line-panel: #E4E5E8; --xy-line-strong: #D6D6D1; --xy-green: #0E7A52; --xy-green-ink: #0A5C3D; --xy-green-soft: #E3F3EC; --xy-blue: #1F4FD1; --xy-blue-ink: #1F3F9E; --xy-blue-soft: #E8EEFC; --xy-amber-ink: #7A4B00; --xy-amber-soft: #FFF1D6; --xy-red-ink: #9E2510; --xy-red-soft: #FDECE8; --xy-sky: #2C9AC9; --xy-sky-ink: #0F4F6B; --xy-sky-soft: #E4F3FA; --xy-sidebar: #16181D; --xy-sidebar-active: #2A2D35; --xy-radius-control: 12px; --xy-radius-card: 16px; --xy-radius-lg: 20px; --xy-radius-xl: 24px; --bs-primary: #D9381E; --bs-primary-rgb: 217, 56, 30; --bs-link-color: #B42B14; --bs-link-hover-color: #D9381E; --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bs-body-color: #16181D; --bs-border-color: #E4E4E0; --bs-border-radius: 12px; } body { font-family: var(--bs-body-font-family); color: var(--xy-ink); background: var(--xy-bg); } h1, h2, h3, h4, h5 { letter-spacing: -.02em; font-weight: 800; } .text-muted { color: var(--xy-muted) !important; } .panel-body { background: var(--xy-panel-bg); } /* Kontroller: 44px, 12px yarıçap */ .form-control, .form-select { min-height: 44px; border-radius: var(--xy-radius-control); border-color: var(--xy-line-strong); } .form-control-sm, .form-select-sm { min-height: 38px; border-radius: 10px; } .form-control:focus, .form-select:focus { border-color: var(--xy-primary); box-shadow: 0 0 0 .2rem rgba(217, 56, 30, .15); } .form-label { font-weight: 600; font-size: .875rem; } .btn { --bs-btn-border-radius: var(--xy-radius-control); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .btn-sm { min-height: 36px; --bs-btn-border-radius: 10px; } .btn-lg { min-height: 52px; } .btn-primary { --bs-btn-bg: #D9381E; --bs-btn-border-color: #D9381E; --bs-btn-hover-bg: #B42B14; --bs-btn-hover-border-color: #B42B14; --bs-btn-active-bg: #B42B14; --bs-btn-active-border-color: #B42B14; } .btn-dark { --bs-btn-bg: #16181D; --bs-btn-border-color: #16181D; } .btn-success { --bs-btn-bg: #0E7A52; --bs-btn-border-color: #0E7A52; --bs-btn-hover-bg: #0A5C3D; --bs-btn-hover-border-color: #0A5C3D; } .btn-outline-primary { --bs-btn-color: #B42B14; --bs-btn-border-color: #D9381E; --bs-btn-hover-bg: #D9381E; --bs-btn-hover-color: #fff; } .btn-outline-secondary, .btn-light { --bs-btn-border-color: #D6D7DB; --bs-btn-color: #16181D; } .btn-light { --bs-btn-bg: #fff; } .brand-mark { border-radius: 10px; background: var(--xy-primary); font-weight: 800; } /* Kartlar */ .card { border: 1px solid var(--xy-line-panel); border-radius: var(--xy-radius-card); background: var(--xy-surface); } .card.shadow-sm, .card.shadow { box-shadow: none !important; } .card-header { border-bottom-color: var(--xy-line-panel); } .table { --bs-table-color: var(--xy-ink); } .table > thead > tr > th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--xy-muted); font-weight: 700; border-bottom-color: var(--xy-line-panel); } .table > :not(caption) > * > * { border-bottom-color: #F0F1F3; } /* Durum rozetleri: tasarımdaki yumuşak tonlar (Yeni=mavi, Hazırlanıyor=amber, Yolda=gökmavisi, Teslim=yeşil, İptal=kırmızı) */ .badge { font-weight: 700; font-size: .75rem; padding: .4em .7em; border-radius: 999px; letter-spacing: 0; } .badge.bg-primary { background: var(--xy-blue-soft) !important; color: var(--xy-blue-ink) !important; } .badge.bg-info { background: var(--xy-sky-soft) !important; color: var(--xy-sky-ink) !important; } .badge.bg-warning { background: var(--xy-amber-soft) !important; color: var(--xy-amber-ink) !important; } .badge.bg-success { background: var(--xy-green-soft) !important; color: var(--xy-green-ink) !important; } .badge.bg-danger { background: var(--xy-red-soft) !important; color: var(--xy-red-ink) !important; } .badge.bg-secondary { background: #E4E4E0 !important; color: #3A3D44 !important; } .badge.bg-dark { background: var(--xy-ink) !important; color: #fff !important; } .badge.bg-light { background: var(--xy-chip) !important; color: var(--xy-ink) !important; } .badge-solid-green { background: var(--xy-green) !important; color: #fff !important; } .rating-pill { background: transparent; color: var(--xy-ink); padding: 0; font-weight: 700; } .rating-pill .bi-star-fill { color: #E7A21A; } .zero-commission { background: var(--xy-green); color: #fff; font-weight: 700; font-size: .8rem; padding: .4rem .8rem; border-radius: 999px; display: inline-block; } /* Yönetim paneli: koyu kenar çubuğu */ .app-sidebar { background: var(--xy-sidebar); } .sidebar-nav .nav-link { border-radius: 10px; min-height: 40px; font-weight: 600; color: #C9CBD1; } .sidebar-nav .nav-link:hover { background: var(--xy-sidebar-active); } .sidebar-nav .nav-link.active { background: var(--xy-sidebar-active); color: #fff; } .sidebar-nav .nav-header { color: var(--xy-faint); font-weight: 700; } .app-topbar { border-bottom-color: var(--xy-line-panel); height: 64px; } /* İşletme paneli: açık kenar çubuğu, aktif öğe kırmızı yumuşak */ .panel-business .app-sidebar { background: #fff; color: var(--xy-ink); border-right: 1px solid var(--xy-line-panel); } .panel-business .sidebar-brand { border-bottom: 0; } .panel-business .sidebar-brand a { color: var(--xy-ink); } .panel-business .sidebar-brand small { color: var(--xy-muted) !important; } .panel-business .sidebar-nav .nav-link { color: var(--xy-ink); } .panel-business .sidebar-nav .nav-link:hover { background: var(--xy-chip); } .panel-business .sidebar-nav .nav-link.active { background: var(--xy-red-soft); color: var(--xy-red-ink); } .panel-business .sidebar-nav .nav-header { color: var(--xy-muted); } /* KPI kartları */ .stat-card .stat-icon { border-radius: 12px; } .stat-card .stat-value { font-weight: 800; letter-spacing: -.02em; } /* Müşteri sitesi */ .site-header { border-bottom-color: var(--xy-line); } .hero { background: var(--xy-ink); border-radius: var(--xy-radius-xl); padding: 3rem; color: #fff; } .hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; } .cat-card { border: 1px solid var(--xy-line); border-radius: 18px; } .biz-card { border: 1px solid var(--xy-line); border-radius: var(--xy-radius-lg); } .biz-card:hover { box-shadow: none; border-color: var(--xy-line-strong); } .biz-cover { background: #F3C9B9; } .product-row { border: 1px solid var(--xy-line); border-radius: 16px; } .product-thumb { border-radius: 14px; } .nav-pills .nav-link { border-radius: 999px; color: var(--xy-ink); font-weight: 600; border: 1px solid var(--xy-line-strong); background: #fff; margin-right: .5rem; white-space: nowrap; } .nav-pills .nav-link.active, .nav-pills .nav-link:hover { background: var(--xy-ink); color: #fff; border-color: var(--xy-ink); } /* İşletme sipariş panosu (Kanban) */ .kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; align-items: start; } .kanban-col { background: #E9EAED; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .kc-head { display: flex; align-items: center; gap: .6rem; padding: .15rem .25rem; } .kc-head strong { flex: 1; font-size: .9rem; } .kc-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: .95rem; background: #fff; } .kc-primary .kc-ico { color: #2b59d9; } .kc-warning .kc-ico { color: #d98a00; } .kc-info .kc-ico { color: #0b8ba8; } .kc-success .kc-ico { color: #1e7a46; } .kc-count { min-width: 26px; text-align: center; font-weight: 800; font-size: .8rem; padding: .1rem .5rem; border-radius: 99px; background: #fff; } .kc-empty { text-align: center; color: #8b93a1; font-size: .85rem; padding: 1.6rem 0; } .kc-empty i { display: block; font-size: 1.5rem; opacity: .5; margin-bottom: .3rem; } .oc { position: relative; background: #fff; border-radius: 18px; padding: 14px 14px 14px 18px; display: flex; flex-direction: column; gap: 11px; box-shadow: 0 1px 2px rgba(20, 24, 36, .06), 0 8px 22px rgba(20, 24, 36, .06); overflow: hidden; transition: transform .15s, box-shadow .15s; } .oc:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 24, 36, .07), 0 14px 30px rgba(20, 24, 36, .1); } .oc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #98a2b3; } .oc-placed::before { background: linear-gradient(#4f7cff, #2b59d9); } .oc-accepted::before, .oc-preparing::before { background: linear-gradient(#ffb84d, #e08a00); } .oc-ready::before { background: linear-gradient(#35c4de, #0b8ba8); } .oc-on_the_way::before { background: linear-gradient(#3ccf84, #1e7a46); } .oc.is-new { box-shadow: 0 0 0 2px #4f7cff, 0 12px 30px rgba(79, 124, 255, .25); animation: oc-glow 2s ease-in-out infinite; } .oc.is-late { box-shadow: 0 0 0 2px #f0583d, 0 10px 26px rgba(217, 56, 30, .2); } .oc-top { display: flex; align-items: center; gap: .6rem; } .oc-no { font-weight: 800; letter-spacing: .01em; color: #1a1c22; text-decoration: none; } .oc-no:hover { color: #D9381E; } .oc-age { flex: 1; text-align: right; font-size: .75rem; font-weight: 600; color: #7b8494; } .oc-print { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #f2f3f6; color: #333; text-decoration: none; } .oc-print:hover { background: #e4e6ec; } .oc-who { display: flex; align-items: center; gap: .65rem; } .oc-av { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #D9381E; background: #fff1ec; } .oc-who > div:nth-child(2) { flex: 1; min-width: 0; } .oc-who strong { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-who small { color: #7b8494; font-size: .76rem; } .oc-tot { text-align: right; } .oc-tot b { display: block; font-size: 1.1rem; font-weight: 800; line-height: 1.1; } .oc-pay { display: inline-block; font-size: .64rem; font-weight: 700; padding: .08rem .5rem; border-radius: 99px; } .oc-pay.paid { background: #e7f6ec; color: #17653a; } .oc-pay.cod { background: #fff4dd; color: #8a5a00; } .oc-items { list-style: none; margin: 0; padding: .3rem .75rem; border-radius: 12px; background: #f6f7f9; font-size: .84rem; } .oc-items li { display: flex; gap: .55rem; padding: .3rem 0; border-bottom: 1px dashed #e0e3ea; } .oc-items li:last-child { border-bottom: 0; } .oc-items b { flex: none; min-width: 1.8rem; color: #D9381E; } .oc-items em { display: block; font-style: normal; font-size: .72rem; color: #7b8494; } .oc-note { font-size: .8rem; padding: .45rem .7rem; border-radius: 10px; background: #fff7e0; color: #7a5200; border: 1px solid #f3dfa4; } .oc-meta { display: flex; flex-wrap: wrap; gap: .4rem; } .oc-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .22rem .6rem; border-radius: 99px; background: #f2f3f6; color: #4a5160; } .oc-chip.sch { background: #efeaff; color: #5a3fc0; } .oc-chip.late { background: #fde8e4; color: #b3261e; } .oc-act { display: flex; gap: .5rem; } .oc-btn { border: 0; border-radius: 13px; padding: .65rem .9rem; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none; width: 100%; cursor: pointer; transition: filter .12s, transform .1s; } .oc-btn:hover { filter: brightness(1.07); } .oc-btn:active { transform: scale(.98); } .oc-btn.ok { color: #fff; background: linear-gradient(135deg, #2fa866, #1e7a46); box-shadow: 0 6px 16px rgba(30, 122, 70, .3); } .oc-btn.go { color: #fff; background: linear-gradient(135deg, #4f7cff, #2b59d9); box-shadow: 0 6px 16px rgba(43, 89, 217, .35); } .oc-btn.dark { color: #fff; background: linear-gradient(135deg, #2b2e36, #1a1c22); } .oc-btn.no { width: auto; color: #b3261e; background: #fff; box-shadow: inset 0 0 0 2px #f0c9c5; } /* Siparişler sayfası: hero, KPI, arama, geçmiş */ .oh { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; margin-bottom: 1rem; border-radius: 24px; color: #fff; background: radial-gradient(600px 220px at 85% -20%, rgba(255, 120, 80, .45), transparent 70%), linear-gradient(135deg, #1a1c22 0%, #2b1b17 60%, #4a1c10 100%); box-shadow: 0 18px 40px rgba(26, 28, 34, .25); } .oh h1 { margin: .25rem 0 .2rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; } .oh p { margin: 0; color: #d8c4bd; font-size: .9rem; max-width: 560px; } .oh p strong { color: #ffd166; } .oh-live { display: inline-flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8df0b4; padding: .2rem .7rem; border-radius: 99px; background: rgba(60, 207, 132, .15); } .oh-live i { width: 8px; height: 8px; border-radius: 50%; background: #3ccf84; box-shadow: 0 0 0 0 rgba(60, 207, 132, .7); animation: oh-pulse 1.8s infinite; } .oh-r { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .oh-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 99px; font-size: .8rem; font-weight: 600; color: #ffe6d9; text-decoration: none; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); } .oh-pill:hover { background: rgba(255, 255, 255, .18); color: #fff; } .oh-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 14px; font-weight: 700; font-size: .88rem; color: #1a1c22; background: #fff; text-decoration: none; } .oh-btn:hover { filter: brightness(.95); color: #1a1c22; } .oh-btn.ghost { color: #fff; background: rgba(255, 255, 255, .12); } .oh-btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, .2); } .ok-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 1rem; } .ok { position: relative; background: #fff; border-radius: 20px; padding: 1rem 1.1rem .9rem; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .06); overflow: hidden; } .ok-top { display: flex; align-items: center; justify-content: space-between; } .ok-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; color: #fff; } .ok-ico.a { background: linear-gradient(135deg, #ff7a52, #D9381E); } .ok-ico.b { background: linear-gradient(135deg, #3ccf84, #1e7a46); } .ok-ico.c { background: linear-gradient(135deg, #6c8bff, #2b59d9); } .ok-ico.d { background: linear-gradient(135deg, #ff8f8f, #c93a3a); } .ok-d { font-size: .72rem; font-weight: 800; padding: .15rem .55rem; border-radius: 99px; } .ok-d.up { background: #e7f6ec; color: #17653a; } .ok-d.down { background: #fde8e4; color: #b3261e; } .ok-v { margin-top: .7rem; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .ok-l { font-size: .8rem; color: #6b7482; margin-top: .15rem; } .ok-l em { font-style: normal; font-size: .68rem; color: #9aa2b0; margin-left: .3rem; } .ok-foot { margin-top: 1.1rem; font-size: .75rem; color: #6b7482; } .ok-spark { display: block; width: 100%; height: 34px; margin-top: .55rem; color: #D9381E; } .ok:nth-child(2) .ok-spark { color: #1e7a46; } .ob-bar { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; } .ob-search { position: relative; flex: 1; max-width: 460px; } .ob-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8b93a1; } .ob-search input { width: 100%; border: 1.5px solid #e3e6ec; border-radius: 14px; padding: .6rem .9rem .6rem 2.4rem; background: #fff; font-size: .9rem; } .ob-search input:focus { outline: 0; border-color: #D9381E; box-shadow: 0 0 0 4px rgba(217, 56, 30, .12); } .ob-hint { font-size: .8rem; color: #6b7482; } .oh-card { background: #fff; border-radius: 24px; padding: 1.3rem 1.3rem .6rem; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .06); } .oh-card .xt-card { box-shadow: none !important; border: 0; background: transparent; } .oh-card .xt-card .xtable { padding: 12px 0 0; } .oh-hd { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .oh-hd h2 { margin: 0; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; } .oh-hd h2 i { color: #D9381E; } .oh-hd p { margin: .25rem 0 0; color: #6b7482; font-size: .85rem; } .oh-sum { display: flex; flex-wrap: wrap; gap: .5rem; } .oh-sum > div { min-width: 92px; padding: .5rem .85rem; border-radius: 14px; background: #f6f7f9; } .oh-sum b { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.15; } .oh-sum small { color: #7b8494; font-size: .7rem; } .oh-chips { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; } .oh-sep { width: 1px; height: 22px; background: #e3e6ec; margin: 0 .3rem; } .oh-chip { border: 1.5px solid #e3e6ec; background: #fff; border-radius: 99px; padding: .38rem .9rem; font-size: .82rem; font-weight: 600; color: #3a3d44; cursor: pointer; transition: all .15s; } .oh-chip em { font-style: normal; font-size: .7rem; margin-left: .25rem; padding: .05rem .4rem; border-radius: 99px; background: #f0f1f4; color: #6b7482; } .oh-chip:hover { border-color: #b7bfcc; } .oh-chip.on { background: #1a1c22; border-color: #1a1c22; color: #fff; } .oh-chip.on em { background: rgba(255, 255, 255, .18); color: #fff; } #history .xt-filters { display: none !important; } #history table.dataTable thead th { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #8b93a1; border-bottom: 2px solid #eef0f4; padding-bottom: .6rem; } #history table.dataTable tbody td { padding: .8rem .6rem; border-color: #f0f1f4; vertical-align: middle; } #history table.dataTable tbody tr { cursor: pointer; transition: background .12s; } #history table.dataTable tbody tr:hover > td { background: #fbf6f4; } .ot-no { font-weight: 800; color: #1a1c22; text-decoration: none; letter-spacing: .01em; } .ot-no:hover { color: #D9381E; } .ot-sch { display: inline-block; margin-left: .35rem; font-size: .66rem; font-weight: 700; padding: .08rem .5rem; border-radius: 99px; background: #efeaff; color: #5a3fc0; } .ot-cust { display: flex; align-items: center; gap: .65rem; min-width: 150px; } .ot-av { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: #D9381E; background: #fff1ec; } .ot-cust strong { display: block; font-size: .9rem; line-height: 1.2; } .ot-cust small { color: #8b93a1; font-size: .75rem; } .ot-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 170px; max-width: 280px; font-size: .82rem; color: #4a5160; line-height: 1.35; } .ot-pay { display: block; font-size: .82rem; font-weight: 600; white-space: nowrap; } .ot-pay i { color: #8b93a1; margin-right: .2rem; } .ot-paid { font-weight: 700; font-size: .68rem; } .ot-paid.yes { color: #17653a; } .ot-paid.wait { color: #b07a00; } .ot-st { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; padding: .28rem .7rem; border-radius: 99px; white-space: nowrap; background: #eef0f4; color: #4a5160; } .ot-st.st-placed { background: #e6edff; color: #2b59d9; } .ot-st.st-accepted, .ot-st.st-preparing { background: #fff1d6; color: #a86500; } .ot-st.st-ready { background: #dff4f8; color: #0b7088; } .ot-st.st-on_the_way { background: #e2f6ea; color: #17653a; } .ot-st.st-delivered { background: #d9f3e3; color: #0f5a30; } .ot-st.st-rejected, .ot-st.st-cancelled { background: #fde8e4; color: #b3261e; } .ot-total { font-size: .95rem; white-space: nowrap; } .ot-date strong { display: block; font-size: .82rem; } .ot-date small { color: #8b93a1; font-size: .72rem; } @keyframes oh-pulse { 70% { box-shadow: 0 0 0 9px rgba(60, 207, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 207, 132, 0); } } @media (prefers-reduced-motion: reduce) { .oh-live i { animation: none; } } /* Sipariş detay */ .od-hero { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; padding: 1.3rem 1.5rem; margin-bottom: 1rem; border-radius: 24px; color: #fff; background: radial-gradient(500px 200px at 90% -30%, rgba(255, 120, 80, .4), transparent 70%), linear-gradient(135deg, #1a1c22 0%, #2b1b17 65%, #4a1c10 100%); box-shadow: 0 18px 40px rgba(26, 28, 34, .22); } .od-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: #ffcdbd; text-decoration: none; } .od-back:hover { color: #fff; } .od-title { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: .45rem 0 .3rem; } .od-title h1 { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: .01em; } .od-title .ot-st { font-size: .8rem; padding: .35rem .9rem; } .od-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .3rem .75rem; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; } .od-chip.sch { background: #efeaff; color: #5a3fc0; } .od-sub { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .85rem; color: #e6cfc6; } .od-sub i { margin-right: .3rem; color: #ffb59f; } .od-hr { display: flex; flex-wrap: wrap; gap: .5rem; } .od-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 13px; font-size: .85rem; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); } .od-btn:hover { background: rgba(255, 255, 255, .22); color: #fff; } .od-final { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.2rem; margin-bottom: 1rem; border-radius: 18px; color: #8f1d17; background: #fde8e4; border: 1px solid #f5c3bc; } .od-final i { font-size: 1.6rem; } .od-final strong { display: block; } .od-final span { font-size: .85rem; } .od-steps { list-style: none; margin: 0 0 1rem; padding: 1.2rem 1rem 1rem; display: grid; grid-template-columns: repeat(6, 1fr); background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .06); } .od-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; } .od-steps li::before { content: ""; position: absolute; top: 20px; left: -50%; width: 100%; height: 3px; background: #e6e9ef; z-index: 0; } .od-steps li:first-child::before { display: none; } .od-steps li.done::before, .od-steps li.now::before { background: linear-gradient(90deg, #2fa866, #1e7a46); } .od-dot { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; background: #eef0f4; color: #98a2b3; border: 3px solid #fff; box-shadow: 0 0 0 1px #e3e6ec; } .od-steps li.done .od-dot { background: linear-gradient(135deg, #2fa866, #1e7a46); color: #fff; box-shadow: 0 6px 14px rgba(30, 122, 70, .35); } .od-steps li.now .od-dot { background: linear-gradient(135deg, #ff7a52, #D9381E); color: #fff; animation: od-ring 1.8s infinite; } .od-steps strong { font-size: .8rem; } .od-steps li.todo strong { color: #98a2b3; font-weight: 600; } .od-steps small { font-size: .72rem; color: #7b8494; min-height: 1em; } .od-card { background: #fff; border-radius: 22px; padding: 1.2rem 1.3rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .06); } .od-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; } .od-hd h2 { margin: 0; font-size: 1rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; } .od-hd h2 i { color: #D9381E; } .od-count { font-size: .75rem; font-weight: 700; padding: .15rem .65rem; border-radius: 99px; background: #f0f1f4; color: #4a5160; } .od-items { list-style: none; margin: 0; padding: 0; } .od-items li { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 0; border-bottom: 1px dashed #e3e6ec; } .od-items li:last-child { border-bottom: 0; } .od-q { flex: none; min-width: 2.6rem; height: 2.2rem; display: grid; place-items: center; border-radius: 11px; font-weight: 800; color: #D9381E; background: #fff1ec; } .od-n { flex: 1; min-width: 0; } .od-var { font-size: .78rem; color: #6b7482; background: #f0f1f4; padding: .05rem .5rem; border-radius: 99px; margin-left: .3rem; } .od-opts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; } .od-opts span { font-size: .75rem; padding: .1rem .55rem; border-radius: 99px; background: #eef4ff; color: #2b59d9; } .od-inote { margin-top: .35rem; font-size: .8rem; color: #b3261e; } .od-p { flex: none; font-weight: 700; } .od-note { display: flex; gap: .8rem; align-items: flex-start; margin: .6rem 0 .8rem; padding: .85rem 1rem; border-radius: 16px; background: #fff7e0; border: 1px solid #f3dfa4; color: #7a5200; } .od-note i { font-size: 1.3rem; } .od-note small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; } .od-sums { margin: 1rem 0 0; padding: .9rem 1rem; border-radius: 16px; background: #f6f7f9; } .od-sums > div { display: flex; justify-content: space-between; padding: .2rem 0; font-size: .88rem; color: #4a5160; } .od-sums dt, .od-sums dd { margin: 0; font-weight: 500; } .od-sums .disc dd { color: #17653a; } .od-sums .disc em { font-style: normal; font-size: .7rem; padding: .05rem .45rem; border-radius: 99px; background: #e7f6ec; color: #17653a; } .od-sums .tot { margin-top: .4rem; padding-top: .6rem; border-top: 1px dashed #d5d9e1; font-size: 1.15rem; color: #1a1c22; } .od-sums .tot dt, .od-sums .tot dd { font-weight: 800; } .od-sums .com { font-size: .78rem; color: #17653a; } .od-tl { list-style: none; margin: 0; padding: 0 0 0 .3rem; } .od-tl li { position: relative; display: flex; gap: .9rem; padding-bottom: 1rem; } .od-tl li:last-child { padding-bottom: 0; } .od-tl li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: #e6e9ef; } .od-tl li:last-child::before { display: none; } .od-tdot { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: #D9381E; box-shadow: 0 0 0 4px #fde8e4; } .od-tl li:not(:first-child) .od-tdot { background: #98a2b3; box-shadow: 0 0 0 4px #eef0f4; } .od-tl strong { display: block; font-size: .9rem; } .od-tl small { color: #7b8494; font-size: .78rem; } .od-tl em { display: block; font-style: normal; font-size: .8rem; color: #4a5160; margin-top: .15rem; } .od-side { position: sticky; top: 76px; } .od-act { border: 2px solid #1a1c22; box-shadow: 0 16px 36px rgba(26, 28, 34, .18); } .od-lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7482; margin-bottom: .45rem; } .od-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .od-chip { border: 1.5px solid #dfe3ea; background: #fff; border-radius: 99px; padding: .32rem .8rem; font-weight: 600; font-size: .82rem; cursor: pointer; color: #1a1c22; } .od-card .od-chip { display: inline-block; } .od-chip.on { background: #1a1c22; border-color: #1a1c22; color: #fff; } .od-hint { font-size: .85rem; color: #6b7482; margin: 0 0 .8rem; } .od-go { width: 100%; margin-top: .8rem; border: 0; border-radius: 15px; padding: .9rem 1rem; font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; color: #fff; transition: filter .12s, transform .1s; } .od-go:hover { filter: brightness(1.07); } .od-go:active { transform: scale(.98); } .od-hint + form .od-go { margin-top: 0; } .od-go.ok { background: linear-gradient(135deg, #2fa866, #1e7a46); box-shadow: 0 10px 22px rgba(30, 122, 70, .35); } .od-go.go { background: linear-gradient(135deg, #4f7cff, #2b59d9); box-shadow: 0 10px 22px rgba(43, 89, 217, .35); } .od-go.dark { background: linear-gradient(135deg, #2b2e36, #1a1c22); } .od-go.no { background: #fff; color: #b3261e; box-shadow: inset 0 0 0 2px #f0c9c5; font-size: .9rem; padding: .7rem; } .od-more { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed #e3e6ec; } .od-more summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: #6b7482; list-style: none; } .od-more summary::-webkit-details-marker { display: none; } .od-more[open] summary { color: #b3261e; margin-bottom: .6rem; } .od-done { text-align: center; padding: 1.6rem 1.3rem; } .od-done i { display: block; font-size: 2.2rem; color: #1e7a46; margin-bottom: .4rem; } .od-done span { display: block; font-size: .85rem; color: #6b7482; } .od-cust { display: flex; align-items: center; gap: .8rem; } .od-av { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff7a52, #D9381E); } .od-cust strong { display: block; } .od-cust small { color: #7b8494; } .od-rows { margin-top: .9rem; display: flex; flex-direction: column; gap: .55rem; } .od-rows > div { display: flex; align-items: flex-start; gap: .6rem; font-size: .86rem; padding: .55rem .7rem; border-radius: 12px; background: #f6f7f9; } .od-rows > div > i { margin-top: .1rem; color: #D9381E; } .od-rows > div > a, .od-rows > div > span { flex: 1; color: inherit; text-decoration: none; word-break: break-word; } .od-copy { border: 0; background: transparent; color: #8b93a1; padding: 0 .2rem; } .od-copy:hover { color: #1a1c22; } .od-copy.ok { color: #1e7a46; } .od-map { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .7rem; padding: .6rem; border-radius: 13px; font-weight: 700; font-size: .85rem; color: #2b59d9; background: #eef4ff; text-decoration: none; } .od-map:hover { background: #e0eaff; } .od-kv { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed #eceef2; font-size: .86rem; } .od-kv:last-child { border-bottom: 0; } .od-kv span { color: #7b8494; } .od-kv b { text-align: right; } @keyframes od-ring { 0% { box-shadow: 0 0 0 0 rgba(217, 56, 30, .5); } 70% { box-shadow: 0 0 0 12px rgba(217, 56, 30, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 56, 30, 0); } } @media (max-width: 640px) { .od-steps { grid-template-columns: repeat(3, 1fr); row-gap: 1rem; } .od-steps li:nth-child(4)::before { display: none; } .od-side { position: static; } } @media (prefers-reduced-motion: reduce) { .od-steps li.now .od-dot { animation: none; } } /* Sipariş ayarları */ .os-hero { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: center; padding: 1.5rem 1.6rem; margin-bottom: 1rem; border-radius: 24px; color: #fff; background: radial-gradient(520px 220px at 90% -30%, rgba(255, 120, 80, .4), transparent 70%), linear-gradient(135deg, #1a1c22 0%, #2b1b17 65%, #4a1c10 100%); box-shadow: 0 18px 40px rgba(26, 28, 34, .22); } .os-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffb59f; } .os-hero h1 { margin: .3rem 0 .25rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; } .os-hero p { margin: 0; max-width: 520px; font-size: .88rem; color: #dcc8c0; } .os-status { display: flex; flex-wrap: wrap; gap: .6rem; } .os-status > div { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; padding: .6rem .95rem; border-radius: 16px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .13); } .os-status i { grid-row: span 2; font-size: 1.2rem; color: #ffb59f; } .os-status span { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #cdb6ad; } .os-status b { font-size: .88rem; } .os-card { background: #fff; border-radius: 22px; padding: 1.3rem 1.4rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .06); } .os-hd { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; } .os-hd h2 { margin: 0; font-size: 1.05rem; font-weight: 800; } .os-hd p { margin: .15rem 0 0; color: #6b7482; font-size: .84rem; } .os-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem; color: #fff; } .os-ico.a { background: linear-gradient(135deg, #3ccf84, #1e7a46); } .os-ico.b { background: linear-gradient(135deg, #6c8bff, #2b59d9); } .os-ico.c { background: linear-gradient(135deg, #b08cff, #6a45d6); } .os-ico.d { background: linear-gradient(135deg, #ff7a52, #D9381E); } .os-ico.e { background: linear-gradient(135deg, #ffcb52, #e08a00); } .os-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; } .os-mode { position: relative; display: block; padding: 1.1rem 1.1rem 1rem; border-radius: 18px; border: 2px solid #e3e6ec; cursor: pointer; transition: all .18s; background: #fff; } .os-mode input { position: absolute; opacity: 0; pointer-events: none; } .os-mode:hover { border-color: #b7bfcc; transform: translateY(-1px); } .os-mode.on { border-color: #1e7a46; background: linear-gradient(180deg, #f2fbf6, #fff); box-shadow: 0 10px 26px rgba(30, 122, 70, .15); } .os-mi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-size: 1.2rem; background: #f0f1f4; color: #4a5160; margin-bottom: .6rem; } .os-mode.on .os-mi { background: linear-gradient(135deg, #2fa866, #1e7a46); color: #fff; } .os-mode strong { display: block; font-size: .98rem; } .os-mode small { display: block; margin-top: .25rem; font-size: .8rem; color: #6b7482; line-height: 1.45; } .os-chk { position: absolute; right: 14px; top: 14px; font-size: 1.3rem; color: #1e7a46; opacity: 0; transform: scale(.6); transition: all .18s; } .os-mode.on .os-chk { opacity: 1; transform: scale(1); } .os-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: 16px; background: #f6f7f9; font-size: .82rem; color: #4a5160; } .os-flow span { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 99px; background: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 24, 36, .08); } .os-flow > i { color: #98a2b3; font-size: .75rem; } #acceptCard .m-auto { display: none; } #acceptCard.is-auto .m-auto { display: inline-flex; } #acceptCard.is-auto .m-manual { display: none; } #acceptCard .col-md-6.m-manual { display: block; } #acceptCard.is-auto .col-md-6.m-manual { display: none; } .os-lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7482; margin-bottom: .4rem; } .os-help { display: block; margin-top: .4rem; font-size: .78rem; color: #7b8494; } .os-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; } .os-save { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: 14px; padding: .75rem 1.5rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff7a52, #D9381E); box-shadow: 0 10px 22px rgba(217, 56, 30, .3); cursor: pointer; transition: filter .12s, transform .1s; } .os-save:hover { filter: brightness(1.07); } .os-save:active { transform: scale(.98); } .os-ghost { display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid #dfe3ea; border-radius: 14px; padding: .7rem 1.2rem; font-weight: 700; background: #fff; color: #1a1c22; } .os-ghost:hover { background: #f6f7f9; } .os-ghost[disabled] { opacity: .5; } .os-switch { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 16px; background: #f6f7f9; cursor: pointer; } .os-switch .form-check-input { flex: none; width: 2.6em; height: 1.4em; margin-top: .1rem; } .os-switch strong { display: block; } .os-switch small { display: block; color: #6b7482; font-size: .8rem; margin-top: .15rem; } .os-det { margin-top: 1.1rem; padding: .9rem 1rem; border-radius: 16px; border: 1px dashed #d5d9e1; } .os-det summary { cursor: pointer; font-weight: 700; font-size: .88rem; list-style: none; } .os-det summary::-webkit-details-marker { display: none; } .os-det[open] summary { margin-bottom: .7rem; } .os-side { position: sticky; top: 76px; } .os-preview { margin: 0 0 1rem; border-radius: 18px; overflow: hidden; border: 1px solid #e3e6ec; box-shadow: 0 10px 24px rgba(20, 24, 36, .1); } .pv-h { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; color: #fff; background: linear-gradient(135deg, #1a1c22, #4a1c10); font-size: .75rem; } .pv-h i { color: #ff7a52; } .pv-h b { flex: 1; letter-spacing: .08em; } .pv-h span { padding: .1rem .5rem; border-radius: 99px; background: rgba(255, 209, 102, .2); color: #ffd166; font-weight: 700; } .pv-b { padding: .8rem .9rem .3rem; } .pv-b i { display: block; height: 9px; border-radius: 6px; background: #eceef2; margin-bottom: .5rem; } .pv-b i.s { width: 60%; } .pv-f { display: flex; gap: .5rem; padding: .4rem .9rem .9rem; } .pv-f u { flex: 1; text-decoration: none; text-align: center; font-size: .72rem; font-weight: 800; padding: .5rem; border-radius: 10px; color: #b3261e; box-shadow: inset 0 0 0 1.5px #f0c9c5; } .pv-f u.ok { flex: 1.6; color: #fff; background: #1e7a46; box-shadow: none; } .os-tips ol { margin: 0; padding-left: 1.1rem; font-size: .85rem; color: #4a5160; display: flex; flex-direction: column; gap: .55rem; } .os-tips b { color: #1a1c22; } .os-snd .snd-list { margin-top: 0; } @media (max-width: 1199px) { .os-side { position: static; } } /* Kısa sipariş kodu ve iletişim hattı */ .oc-no { display: inline-flex; align-items: baseline; gap: .5rem; } .oc-sn { font-size: 1.25rem; font-weight: 900; letter-spacing: .02em; color: #D9381E; } .oc-no small { font-size: .7rem; font-weight: 600; color: #8b93a1; } .oa-full { display: block; font-size: .75rem; color: #ffcdbd; letter-spacing: .06em; } .od-sn { display: inline-block; padding: .05rem .7rem; border-radius: 14px; background: #fff; color: #D9381E; font-weight: 900; letter-spacing: .02em; } .od-title h1 small { font-size: .85rem; font-weight: 600; color: #ffcdbd; letter-spacing: .04em; } .ot-sn { display: inline-block; font-weight: 900; font-size: .95rem; padding: .1rem .55rem; border-radius: 10px; background: #fff1ec; color: #D9381E; letter-spacing: .02em; } .od-line { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 14px; background: #eef4ff; border: 1px solid #cfdcff; } .od-line > i { color: #2b59d9; font-size: 1.2rem; } .od-line > span { flex: 1; font-size: .85rem; } .od-line small { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7aa8; } .od-line a { color: #1a1c22; text-decoration: none; } .od-ccode { display: inline-block; margin-left: .35rem; padding: .08rem .55rem; border-radius: 8px; background: #1a1c22; color: #ffd166; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; } .od-hint2 { font-size: .75rem; color: #6b7482; padding: 0 .3rem; } .cl-list { max-height: 420px; overflow: auto; border-radius: 14px; border: 1px solid #eceef2; } .cl-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid #f0f1f4; cursor: pointer; margin: 0; } .cl-row:last-child { border-bottom: 0; } .cl-row:hover { background: #fbf6f4; } .cl-row small { display: block; font-size: .72rem; color: #8b93a1; } .cl-row .form-check-input { width: 2.6em; height: 1.4em; } .closed-banner.warn { background: #FFF1D6; border-color: #F1D79A; color: #7A4B00; } .closed-banner.warn i { color: #E08A00; } .closed-banner.info { background: #E8EEFC; border-color: #BFCFF5; color: #1F3F9E; } .closed-banner.info i { color: #1F4FD1; } .bc-pick { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; padding: .2rem .6rem; border-radius: 99px; background: #fff; color: #0b6aa6; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } /* Sepet: sipariş türü (Adrese teslimat / Gel-Al) */ .ck-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .ck-mode { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; text-align: left; border: 2px solid #E4E5E8; border-radius: 16px; background: #fff; cursor: pointer; transition: all .15s; } .ck-mode i { font-size: 1.5rem; color: #8E929B; } .ck-mode strong { display: block; font-size: .95rem; } .ck-mode small { color: #5B5F68; font-size: .78rem; } .ck-mode:hover { border-color: #b7bfcc; } .ck-mode.on { border-color: #D9381E; background: #fff6f3; box-shadow: 0 8px 20px rgba(217, 56, 30, .12); } .ck-mode.on i { color: #D9381E; } .ck-pin { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, #ff7a52, #D9381E); } @media (max-width: 520px) { .ck-modes { grid-template-columns: 1fr; } } /* ===== İşletme paneli: ortak premium bileşenler ===== */ .panel-business .app-content { background: #f3f4f7; } .ph { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; padding: 1rem 1.2rem; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .05); } .ph-l { display: flex; align-items: center; gap: .9rem; min-width: 0; } .ph-ico { flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, #ff7a52, #D9381E); box-shadow: 0 8px 18px rgba(217, 56, 30, .3); } .ph h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; } .ph p { margin: .1rem 0 0; font-size: .84rem; color: #6b7482; max-width: 640px; } .ph-r { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .ph-r .btn { border-radius: 13px; font-weight: 700; padding: .55rem 1rem; } .ph-r .btn-primary { background: linear-gradient(135deg, #ff7a52, #D9381E); border: 0; box-shadow: 0 8px 18px rgba(217, 56, 30, .28); } .ph-r .btn-primary:hover { filter: brightness(1.06); } .ph-r .btn-outline-secondary, .ph-r .btn-outline-dark { background: #fff; border: 1.5px solid #e3e6ec; color: #1a1c22; } .ph-r .btn-outline-secondary:hover, .ph-r .btn-outline-dark:hover { background: #f6f7f9; color: #1a1c22; border-color: #cfd4de; } .ss { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 1rem; } .ss-i { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 8px 22px rgba(20, 24, 36, .05); } .ss-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 1.1rem; background: #f0f1f4; color: #4a5160; } .ss-i.ok .ss-ico { background: #e2f6ea; color: #17653a; } .ss-i.warn .ss-ico { background: #fff1d6; color: #a86500; } .ss-i.info .ss-ico { background: #e6edff; color: #2b59d9; } .ss-i b { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; } .ss-i small { color: #7b8494; font-size: .75rem; font-weight: 600; } /* kartlar */ .panel-business .card { border: 0 !important; border-radius: 22px; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .06) !important; } .panel-business .acc-card, .panel-business .acc-hero, .panel-business .acc-tabs-wrap, .panel-business .acc-kpi, .panel-business .acc-doc { border: 0; border-radius: 22px; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .05); } .panel-business .acc-card { padding: 1.3rem 1.4rem; } .panel-business .acc-head h2 { font-size: 1.02rem; font-weight: 800; } .panel-business .acc-head h2 i { width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; background: #fff1ec; color: #D9381E; font-size: 1rem; } .panel-business .acc-hero { padding: 1.1rem 1.3rem; background: linear-gradient(135deg, #fff, #fff6f3); } .panel-business .acc-logo { width: 60px; height: 60px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #ff7a52, #D9381E); font-size: 1.4rem; box-shadow: 0 8px 18px rgba(217, 56, 30, .25); } .panel-business .acc-tabs-wrap { padding: .35rem; } .panel-business .acc-tabs .nav-link { border: 0; border-radius: 14px; padding: .65rem 1rem; margin: 0 .1rem; font-size: .84rem; } .panel-business .acc-tabs .nav-link.active { background: #1a1c22; color: #fff; border: 0; } .panel-business .acc-alert { border-radius: 16px; } .panel-business .acc-lbl, .panel-business .form-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7482; } .panel-business .acc-line { padding: .8rem .4rem; border-radius: 12px; } .panel-business .acc-line:hover { background: #fbf6f4; } .panel-business .acc-chip { font-weight: 700; } /* form elemanları */ .panel-business .form-control, .panel-business .form-select { border: 1.5px solid #e3e6ec; border-radius: 13px; padding: .6rem .85rem; background-color: #fff; transition: border-color .15s, box-shadow .15s; } .panel-business .form-control:focus, .panel-business .form-select:focus { border-color: #D9381E; box-shadow: 0 0 0 4px rgba(217, 56, 30, .12); } .panel-business .form-control:disabled, .panel-business .form-select:disabled { background: #f6f7f9; } .panel-business .form-check-input:checked { background-color: #1e7a46; border-color: #1e7a46; } .panel-business .btn { border-radius: 13px; font-weight: 700; } .panel-business .btn-primary { background: linear-gradient(135deg, #ff7a52, #D9381E); border: 0; box-shadow: 0 8px 18px rgba(217, 56, 30, .25); } .panel-business .btn-primary:hover { filter: brightness(1.06); } .panel-business .btn-outline-secondary, .panel-business .btn-outline-dark { border: 1.5px solid #e3e6ec; color: #1a1c22; background: #fff; } .panel-business .btn-outline-secondary:hover, .panel-business .btn-outline-dark:hover { background: #f6f7f9; color: #1a1c22; border-color: #cfd4de; } .panel-business .btn-sm { border-radius: 11px; } .panel-business .badge { font-weight: 700; padding: .38em .7em; border-radius: 99px; } /* DataTable */ .panel-business .xt-card { box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .06) !important; } .panel-business .xt-card .xtable { padding: 1rem 1.2rem .4rem; } .panel-business .xtable table.dataTable thead th { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #8b93a1; font-weight: 700; border-bottom: 2px solid #eef0f4; padding: .5rem .6rem .7rem; } .panel-business .xtable table.dataTable tbody td { padding: .85rem .6rem; border-color: #f0f1f4; vertical-align: middle; } .panel-business .xtable table.dataTable tbody tr:hover > td { background: #fbf6f4; } .panel-business .xtable table.dataTable tbody td:first-child + td, .panel-business .xtable table.dataTable tbody td:nth-child(3) { font-weight: 600; } .panel-business .dataTables_wrapper .dataTables_filter input { border: 1.5px solid #e3e6ec; border-radius: 13px; padding: .5rem .85rem; margin-left: .4rem; min-width: 220px; } .panel-business .dataTables_wrapper .dataTables_filter input:focus { outline: 0; border-color: #D9381E; box-shadow: 0 0 0 4px rgba(217, 56, 30, .12); } .panel-business .dataTables_wrapper .dataTables_length select { border: 1.5px solid #e3e6ec; border-radius: 11px; padding: .3rem 1.6rem .3rem .6rem; } .panel-business .dataTables_wrapper .dt-buttons .btn { border-radius: 11px !important; border: 1.5px solid #e3e6ec; background: #fff; color: #1a1c22; font-weight: 600; font-size: .8rem; } .panel-business .dataTables_wrapper .dt-buttons .btn:hover { background: #f6f7f9; } .panel-business .xt-toolbar .btn, .panel-business .xt-filters .form-select { border-radius: 12px; } .panel-business .page-item .page-link { border: 0; border-radius: 11px; margin: 0 .12rem; color: #4a5160; font-weight: 700; } .panel-business .page-item.active .page-link { background: #1a1c22; color: #fff; } .panel-business .dataTables_info { color: #7b8494; font-size: .8rem; } .panel-business .dropdown-menu { border: 0; border-radius: 16px; box-shadow: 0 16px 40px rgba(20, 24, 36, .18); padding: .4rem; } .panel-business .dropdown-item { border-radius: 10px; font-size: .88rem; font-weight: 600; padding: .5rem .8rem; } .panel-business .xtable .badge { font-size: .7rem; } /* kayıt formları */ .pf-wrap { max-width: 980px; } .pf-card { background: #fff; border-radius: 24px; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 12px 30px rgba(20, 24, 36, .07); overflow: hidden; } .pf-head { display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1.5rem; background: linear-gradient(135deg, #fff, #fff6f3); border-bottom: 1px solid #f0e4df; } .pf-head .ph-ico { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 13px; } .pf-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; } .pf-head p { margin: .1rem 0 0; font-size: .82rem; color: #6b7482; } .pf-body { padding: 1.4rem 1.5rem .6rem; } .pf-foot { display: flex; gap: .6rem; padding: 1rem 1.5rem 1.3rem; border-top: 1px dashed #e8ebf0; background: #fcfcfd; } .pf-foot .btn { padding: .65rem 1.6rem; } /* kampanya şablon galerisi */ .panel-business .promo-gallery { gap: 14px; } .panel-business .promo-tpl { position: relative; border: 0; border-radius: 22px; padding: 1.2rem; text-align: left; background: #fff; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .06); transition: transform .18s, box-shadow .18s; overflow: hidden; } .panel-business .promo-tpl::before { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 122, 82, .22), transparent 70%); } .panel-business .promo-tpl:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20, 24, 36, .06), 0 18px 38px rgba(20, 24, 36, .12); } .panel-business .promo-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, #ff7a52, #D9381E); box-shadow: 0 8px 18px rgba(217, 56, 30, .25); } .panel-business .promo-ic.sm { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 12px; } .panel-business .promo-tpl strong { display: block; margin-top: .7rem; font-size: 1rem; } .panel-business .promo-tpl small { display: block; color: #6b7482; margin-top: .2rem; } .panel-business .promo-tpl em { display: inline-flex; align-items: center; gap: .3rem; margin-top: .8rem; font-style: normal; font-weight: 800; font-size: .8rem; color: #D9381E; } @media (max-width: 640px) { .ph { padding: .9rem; } .ph-ico { width: 42px; height: 42px; } } /* tablo hücreleri */ .tb-name strong { display: block; font-size: .92rem; line-height: 1.2; } .tb-name small { color: #8b93a1; font-size: .75rem; } .tb-price { font-weight: 800; white-space: nowrap; } .tb-st { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; color: #7b8494; } .tb-st i { width: 8px; height: 8px; border-radius: 50%; background: #c5cad4; } .tb-st.on { color: #17653a; } .tb-st.on i { background: #2fa866; box-shadow: 0 0 0 3px rgba(47, 168, 102, .18); } .tb-count { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .82rem; padding: .2rem .65rem; border-radius: 99px; background: #f0f1f4; color: #4a5160; } .tb-yes { color: #2fa866; font-size: 1.05rem; } .tb-no { color: #c5cad4; font-size: 1.05rem; } .tb-code { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 10px; border: 1.5px dashed #e3a897; background: #fff6f3; color: #D9381E; font-weight: 800; letter-spacing: .06em; font-size: .82rem; } .tb-use { min-width: 110px; font-size: .78rem; font-weight: 700; color: #4a5160; } .tb-use i { display: block; height: 5px; margin-top: .3rem; border-radius: 4px; background: #eceef2; overflow: hidden; } .tb-use b { display: block; height: 100%; background: linear-gradient(90deg, #ff7a52, #D9381E); } .tb-person { display: flex; align-items: center; gap: .7rem; } .tb-av { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: #fff; background: linear-gradient(135deg, #6c8bff, #2b59d9); } .tb-role { display: inline-block; font-size: .75rem; font-weight: 700; padding: .25rem .7rem; border-radius: 99px; background: #eef4ff; color: #2b59d9; } /* işletme ayarları */ .panel-business .card-body > h2.h6 { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem !important; font-weight: 800; margin-bottom: 1rem !important; } .panel-business .card-body > h2.h6 > i { width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; background: #fff1ec; color: #D9381E !important; font-size: 1rem; } .panel-business .dm-box, .panel-business .img-slot, .panel-business .dz-link { border: 1.5px solid #e8ebf0; border-radius: 18px; background: #fcfcfd; } .panel-business .dm-box { padding: 1.1rem 1.2rem; } .panel-business .dm-title strong { font-size: .98rem; } .panel-business .dm-opt { border: 1.5px solid #e3e6ec; border-radius: 15px; background: #fff; } .panel-business .dm-opt.on, .panel-business .dm-opt:has(input:checked) { border-color: #1e7a46; background: linear-gradient(180deg, #f2fbf6, #fff); box-shadow: 0 8px 20px rgba(30, 122, 70, .12); } .panel-business .dm-ico { border-radius: 12px; background: linear-gradient(135deg, #3ccf84, #1e7a46); color: #fff; } .panel-business .dz-link { transition: all .15s; } .panel-business .dz-link:hover { border-color: #cfd4de; box-shadow: 0 10px 24px rgba(20, 24, 36, .08); transform: translateY(-1px); } .panel-business .pm-row { border: 1.5px solid #e8ebf0; border-radius: 16px; padding: .7rem .9rem; background: #fff; } .panel-business .pm-row:has(input.pm-toggle:checked) { border-color: #2fa866; background: #f2fbf6; } .panel-business .hours-card .hours-row { border: 1.5px solid #eceef2; border-radius: 16px; background: #fff; } .panel-business .hours-card .hours-row.is-closed { background: #f6f7f9; } .panel-business .hours-presets .btn { border-radius: 99px; font-size: .74rem; } .save-bar { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .8rem 1rem .8rem 1.3rem; border-radius: 20px; background: rgba(26, 28, 34, .94); color: #e6e8ee; backdrop-filter: blur(8px); box-shadow: 0 18px 40px rgba(20, 24, 36, .35); font-size: .85rem; } .save-bar .btn { padding: .65rem 1.4rem; } .panel-business .modal-content { border: 0; border-radius: 24px; box-shadow: 0 30px 80px rgba(20, 24, 36, .35); } .panel-business .modal-header { border-bottom: 1px solid #f0f1f4; padding: 1.1rem 1.4rem; } .panel-business .modal-footer { border-top: 1px dashed #e8ebf0; padding: 1rem 1.4rem; } .panel-business .modal-title { font-weight: 800; font-size: 1.05rem; } .panel-business .nav-tabs { border-bottom: 0; } .pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 1.3rem; } .pf-grid > .form-check, .pf-grid > .form-text, .pf-grid > div:has(textarea), .pf-grid > div:has(.form-check) { grid-column: 1 / -1; } /* Kurye saatleri / Gel-Al (işletme ayarları) */ .ch-info { display: flex; gap: .9rem; align-items: center; padding: .9rem 1rem; border-radius: 16px; margin-bottom: .9rem; background: #f6f7f9; } .ch-info > i { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: #8b93a1; } .ch-info strong { display: block; } .ch-info span { font-size: .82rem; color: #6b7482; } .ch-info.ok { background: #e9f8ef; } .ch-info.ok > i { background: linear-gradient(135deg, #3ccf84, #1e7a46); } .ch-info.off { background: #fff1d6; } .ch-info.off > i { background: linear-gradient(135deg, #ffb84d, #e08a00); } .ch-info.own > i, .ch-info.free > i { background: linear-gradient(135deg, #6c8bff, #2b59d9); } .ch-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .5rem; margin-bottom: 1rem; } .ch-week > div { padding: .5rem .6rem; border-radius: 12px; background: #fff; border: 1.5px solid #eceef2; text-align: center; } .ch-week small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #8b93a1; } .ch-week b { font-size: .82rem; } .ch-week em { display: block; font-style: normal; font-size: .66rem; color: #a86500; } .ch-week .x { background: #fdecea; border-color: #f5c3bc; } .ch-week .x b { color: #b3261e; } .ch-switch { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 16px; background: #f6f7f9; cursor: pointer; } .ch-switch .form-check-input { flex: none; width: 2.6em; height: 1.4em; margin-top: .1rem; } .ch-switch strong { display: block; } .ch-switch small { display: block; color: #6b7482; font-size: .8rem; margin-top: .15rem; } .ch-rules { margin: 0; padding-left: 1.1rem; font-size: .82rem; color: #6b7482; display: flex; flex-direction: column; gap: .35rem; } html[data-theme="dark"] .panel-business :is(.ch-info, .ch-switch) { background: #1e232d; } html[data-theme="dark"] .panel-business .ch-info.ok { background: #12301f; } html[data-theme="dark"] .panel-business .ch-info.off { background: #3a2a0c; } html[data-theme="dark"] .panel-business .ch-week > div { background: #171b23; border-color: #2b313d; } html[data-theme="dark"] .panel-business .ch-week .x { background: #3a1914; border-color: #5a2a22; } html[data-theme="dark"] .panel-business :is(.ch-info span, .ch-switch small, .ch-rules) { color: #9ba4b4; } html[data-theme="dark"] .panel-business .ch-switch strong, html[data-theme="dark"] .panel-business .ch-info strong { color: #f1f3f8; } .oc-chip.pick, .od-chip.pick { background: #e0f2ff; color: #0b6aa6; font-weight: 800; } .od-chip.pick { background: #fff; color: #0b6aa6; } .od-steps { grid-template-columns: repeat(var(--n, 6), 1fr); } .receipt .pickup-title { font-weight: 800; border: 2px solid #000; padding: .3em; margin: .4em 0; } html[data-theme="dark"] .panel-business .oc-chip.pick { background: #10303d; color: #7fd0f0; } /* Admin: kurye hizmet saatleri */ .ch-tabs { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1rem; border-bottom: 1px solid #eceef2; } .ch-tabs button { border: 0; background: transparent; padding: .65rem 1rem; font-weight: 700; font-size: .88rem; color: #7b8494; border-bottom: 3px solid transparent; } .ch-tabs button.on { color: #1a1c22; border-bottom-color: #D9381E; } .ch-tabs em { font-style: normal; font-size: .7rem; margin-left: .3rem; padding: .05rem .45rem; border-radius: 99px; background: #f0f1f4; } .ch-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .8rem; } .ch-presets button { border: 1.5px solid #e3e6ec; background: #fff; border-radius: 99px; padding: .3rem .85rem; font-size: .78rem; font-weight: 700; } .ch-presets button:hover { background: #f6f7f9; } .ch-presets.is-off, .ch-table.is-off { opacity: .45; pointer-events: none; } .ch-table { border: 1.5px solid #eceef2; border-radius: 16px; overflow: hidden; } .ch-row { display: grid; grid-template-columns: 1.2fr .7fr 2fr 2fr; align-items: center; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid #f0f1f4; } .ch-row:last-child { border-bottom: 0; } .ch-row.hd { background: #f6f7f9; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8b93a1; } .ch-row.is-closed { background: #fafafb; } .ch-row.is-closed .ch-times { opacity: .45; } .ch-times { display: flex; align-items: center; gap: .5rem; } .ch-times .form-control { max-width: 130px; } .ch-times i { color: #98a2b3; font-style: normal; } .ch-hint { font-size: .74rem; color: #98a2b3; } .ch-row.hd .ch-hint { color: #8b93a1; } .ch-exc-row { display: grid; grid-template-columns: 1.1fr 2fr 1.3fr auto; align-items: center; gap: .8rem; padding: .7rem 1rem; border-radius: 14px; background: #f6f7f9; margin-bottom: .5rem; } .ch-chip { display: inline-block; font-size: .75rem; font-weight: 800; padding: .2rem .65rem; border-radius: 99px; background: #e2f6ea; color: #17653a; white-space: nowrap; } .ch-chip.x { background: #fde8e4; color: #b3261e; } .ch-add { margin-top: 1.2rem; padding: 1.1rem; border-radius: 18px; border: 1.5px dashed #d5d9e1; } .ch-add h3 { font-size: .95rem; font-weight: 800; margin-bottom: .8rem; } @media (max-width: 760px) { .ch-row { grid-template-columns: 1fr 1fr; } .ch-row .ch-hint, .ch-row.hd { display: none; } .ch-exc-row { grid-template-columns: 1fr; } } @keyframes oc-glow { 50% { box-shadow: 0 0 0 3px #4f7cff, 0 12px 34px rgba(79, 124, 255, .38); } } @media (prefers-reduced-motion: reduce) { .oc, .oc.is-new { animation: none; transition: none; } } /* Kurye PWA */ .courier-body { background: var(--xy-panel-bg); } .courier-top { background: var(--xy-ink); border-radius: 0; } .task-card { border-radius: 14px; border: 1px solid var(--xy-line-panel); box-shadow: none; } .btn-xl { border-radius: 14px; min-height: 54px; font-weight: 800; } /* DataTable */ .xt-card .card-body { padding: 0; } .xt-card .xtable { padding: 16px 20px; } .page-item.active .page-link { background: var(--xy-ink); border-color: var(--xy-ink); } .page-link { border-radius: 8px !important; margin: 0 2px; color: var(--xy-ink); } /* ===== Müşteri sitesi v3: header, kategori şeridi, hero slider, kartlar, banner ===== */ .promo-bar { background: linear-gradient(90deg, #16181D, #2A1A16 55%, #D9381E); color: #F3E9E6; font-size: .8rem; padding: .4rem 0; } .promo-bar a { color: #fff; text-decoration: none; opacity: .9; } .promo-bar a:hover { opacity: 1; text-decoration: underline; } .promo-bar .bi-lightning-charge-fill { color: #FFC23D; } .site-header { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 1px 0 var(--xy-line), 0 8px 24px -18px rgba(22, 24, 29, .35); } .brand-lockup { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: -.02em; } .brand-lockup .brand-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, #F0502F, #B42B14); box-shadow: 0 6px 14px -4px rgba(217, 56, 30, .6); font-size: 1.1rem; } .brand-word { font-size: 1.25rem; color: var(--xy-ink); } .hd-search { display: flex; align-items: center; gap: .5rem; background: var(--xy-chip); border: 1.5px solid transparent; border-radius: 999px; padding: .25rem .3rem .25rem 1rem; transition: .15s; max-width: 560px; } .hd-search:focus-within { background: #fff; border-color: var(--xy-primary); box-shadow: 0 0 0 4px rgba(217, 56, 30, .12); } .hd-search i { color: var(--xy-faint); } .hd-search input { flex: 1; border: 0; background: transparent; outline: 0; padding: .4rem 0; font-size: .92rem; min-width: 0; } .hd-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--xy-ink); text-decoration: none; font-weight: 600; font-size: .9rem; padding: .5rem .75rem; border-radius: 999px; } .hd-link:hover { background: var(--xy-chip); color: var(--xy-ink); } .hd-link-apply { color: var(--xy-green-ink); background: var(--xy-green-soft); } .hd-link-apply:hover { background: #D3EBDF; color: var(--xy-green-ink); } .hd-new { background: var(--xy-green); color: #fff; font-size: .65rem; padding: .1rem .4rem; border-radius: 999px; } .hd-btn { font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; } .hd-cta { background: linear-gradient(135deg, #F0502F, #C42F15); border: 0; box-shadow: 0 8px 18px -8px rgba(217, 56, 30, .8); } .hd-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(217, 56, 30, .9); } .hd-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--xy-chip); color: var(--xy-ink); font-size: 1.15rem; text-decoration: none; border: 0; } .hd-icon-btn:hover { background: var(--xy-line); color: var(--xy-ink); } .hd-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--xy-primary); color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } .hd-user { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .8rem .25rem .3rem; border-radius: 999px; background: var(--xy-chip); color: var(--xy-ink); text-decoration: none; font-weight: 600; font-size: .9rem; } .hd-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--xy-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .hd-menu { border: 1px solid var(--xy-line); border-radius: 14px; box-shadow: 0 16px 40px -16px rgba(22, 24, 29, .3); padding: .4rem; } .hd-menu .dropdown-item { border-radius: 9px; display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; } @media (max-width: 991.98px) { #siteNav .navbar-nav { padding-bottom: .75rem; align-items: stretch !important; } #siteNav .btn { width: 100%; } } .cat-strip { border-top: 1px solid var(--xy-line); background: #fff; } .cat-strip-row { display: flex; gap: .5rem; overflow-x: auto; padding: .55rem 0; scrollbar-width: none; } .cat-strip-row::-webkit-scrollbar { display: none; } .cat-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem .3rem .3rem; border: 1px solid var(--xy-line); border-radius: 999px; background: #fff; color: var(--xy-ink); text-decoration: none; font-weight: 600; font-size: .85rem; transition: .15s; } .cat-chip:hover { border-color: var(--xy-line-strong); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(22, 24, 29, .35); color: var(--xy-ink); } .cat-chip.active { background: var(--xy-ink); border-color: var(--xy-ink); color: #fff; } .cat-ico { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; } .cat-ico.t0 { background: var(--xy-chip); color: var(--xy-ink); } .cat-ico.t1 { background: var(--xy-red-soft); color: var(--xy-primary); } .cat-ico.t2 { background: var(--xy-blue-soft); color: var(--xy-blue); } .cat-ico.t3 { background: var(--xy-green-soft); color: var(--xy-green); } .cat-ico.t4 { background: var(--xy-sky-soft); color: var(--xy-sky); } .cat-ico.t5 { background: var(--xy-amber-soft); color: #B7791F; } .cat-chip.active .cat-ico { background: rgba(255, 255, 255, .16); color: #fff; } .cat-count { background: var(--xy-chip); color: var(--xy-muted); font-size: .7rem; padding: .05rem .4rem; border-radius: 999px; } .cat-chip.active .cat-count { background: rgba(255, 255, 255, .18); color: #fff; } .hero-slider { border-radius: var(--xy-radius-xl); overflow: hidden; position: relative; box-shadow: 0 24px 50px -30px rgba(22, 24, 29, .6); } .hero-slide { min-height: 410px; padding: 3rem 4.5rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; color: #fff; position: relative; overflow: hidden; } .hero-slide::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%); pointer-events: none; } .hs-ink { background: linear-gradient(120deg, #16181D 40%, #2B1B17 100%); } .hs-red { background: linear-gradient(120deg, #B42B14, #E8502A); } .hs-green { background: linear-gradient(120deg, #0A5C3D, #12A06B); } .hs-blue { background: linear-gradient(120deg, #15357F, #2A62E0); } .hs-copy { display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 1; } .hs-copy h1, .hs-copy h2 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.06; font-size: clamp(1.9rem, 3.8vw, 3.1rem); } .hs-copy h1 em { font-style: normal; color: #FF8A6B; } .hs-copy p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 1.05rem; max-width: 520px; } .hs-kicker { align-self: flex-start; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); padding: .35rem .8rem; border-radius: 999px; font-weight: 700; font-size: .8rem; } .hero-slide .zero-commission { align-self: flex-start; } .hs-search { display: flex; flex-wrap: wrap; gap: .5rem; background: #fff; padding: .5rem; border-radius: 18px; max-width: 580px; } .hs-loc { flex: 1 1 220px; display: flex; align-items: center; gap: .55rem; border: 0; background: transparent; color: var(--xy-ink); font-weight: 600; padding: 0 .75rem; text-align: left; min-height: 48px; } .hs-loc .bi-geo-alt-fill { color: var(--xy-primary); } .hs-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; color: rgba(255, 255, 255, .75); } .hs-trust i { color: #7DE0B3; } .hs-visual { position: relative; z-index: 1; } .hs-visual.d-lg-grid, .hs-visual.hs-stats { grid-template-columns: 1fr 1fr; gap: .75rem; } .hs-tile { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 1rem; color: #fff; text-decoration: none; display: flex; flex-direction: column; gap: .25rem; transition: .2s; backdrop-filter: blur(4px); } .hs-tile:hover { background: rgba(255, 255, 255, .14); transform: translateY(-3px); color: #fff; } .hs-tile-ico { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: .5rem; } .hs-tile.t1 .hs-tile-ico { background: #D9381E; } .hs-tile.t2 .hs-tile-ico { background: #1F4FD1; } .hs-tile.t3 .hs-tile-ico { background: #0E7A52; } .hs-tile.t4 .hs-tile-ico { background: #2C9AC9; } .hs-tile small { color: rgba(255, 255, 255, .6); font-size: .75rem; } .hs-coupon { align-items: center; justify-content: center; } .coupon { background: #fff; color: var(--xy-ink); border-radius: 22px; padding: 1.75rem 2.25rem; text-align: center; transform: rotate(-4deg); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .5); border: 2px dashed #E0B8AE; position: relative; z-index: 1; } .coupon small { display: block; letter-spacing: .18em; color: var(--xy-muted); font-size: .7rem; font-weight: 700; } .coupon strong { display: block; font-size: 1.9rem; letter-spacing: .04em; color: var(--xy-primary); margin: .25rem 0; } .coupon span { font-weight: 600; } .hs-bg-ico { position: absolute; font-size: 16rem; opacity: .08; right: -2rem; } .hs-icons { gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; } .hs-icons i { width: 110px; height: 110px; border-radius: 28px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); display: inline-flex; align-items: center; justify-content: center; font-size: 2.8rem; } .hs-icons i:nth-child(odd) { transform: translateY(-14px); } .hs-stats div { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; padding: 1.2rem; display: flex; flex-direction: column; } .hs-stats strong { font-size: 1.7rem; letter-spacing: -.02em; } .hs-stats span { color: rgba(255, 255, 255, .75); font-size: .85rem; } .hero-arrow { width: 44px; height: 44px; top: 50%; bottom: auto; transform: translateY(-50%); margin: 0 .9rem; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff; opacity: 1; backdrop-filter: blur(6px); } .hero-arrow:hover { background: rgba(255, 255, 255, .3); color: #fff; } .hero-ind { margin-bottom: 1rem; } .hero-ind [data-bs-target] { width: 8px; height: 8px; border-radius: 999px; border: 0; opacity: .45; transition: .25s; } .hero-ind .active { width: 30px; opacity: 1; } @media (max-width: 991.98px) { .hero-slide { grid-template-columns: 1fr; padding: 2rem 1.25rem 3.5rem; min-height: 0; } .hero-arrow { display: none; } } .biz-card { position: relative; transition: transform .2s, box-shadow .2s, border-color .2s; } .biz-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(22, 24, 29, .45); border-color: var(--xy-line-strong); } .biz-cover { height: 150px; background: linear-gradient(135deg, #F7D2C4, #F0A68B 60%, #E8795A); align-items: flex-start; justify-content: flex-start; } .biz-cover > .bi-shop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; color: rgba(255, 255, 255, .55); } .biz-cover.closed { filter: grayscale(.6); } .biz-cover.closed::after { content: "Şu an kapalı"; font-size: .95rem; } .biz-tags { position: absolute; left: .7rem; top: .7rem; display: flex; flex-wrap: wrap; gap: .3rem; z-index: 1; max-width: 75%; } .biz-tag { font-size: .7rem; font-weight: 700; padding: .22rem .55rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .3rem; background: #fff; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3); } .tag-open { color: var(--xy-green-ink); } .tag-open .bi { font-size: .45rem; color: #19B36E; } .tag-free { background: var(--xy-green); color: #fff; } .tag-star { background: #FFC23D; color: #5C3B00; } .biz-rate { position: absolute; right: .7rem; bottom: -14px; background: #fff; border-radius: 999px; padding: .3rem .7rem; font-weight: 800; font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; box-shadow: 0 8px 18px -8px rgba(22, 24, 29, .45); z-index: 2; } .biz-rate .bi { color: #E7A21A; } .biz-rate small { color: var(--xy-faint); font-weight: 500; } .biz-body { padding: 1.1rem 1rem 1rem; display: flex; flex-direction: column; gap: .9rem; } .biz-logo { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: var(--xy-ink); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-top: -2rem; border: 3px solid #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); position: relative; z-index: 2; } .biz-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .biz-sub { color: var(--xy-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .min-w-0 { min-width: 0; } .biz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .biz-stat { display: flex; align-items: center; gap: .5rem; padding: .5rem .55rem; border-radius: 12px; min-width: 0; } .biz-stat > i { font-size: 1.05rem; } .biz-stat strong { display: block; font-size: .82rem; line-height: 1.15; white-space: nowrap; } .biz-stat small { display: block; font-size: .68rem; opacity: .75; } .st-time { background: var(--xy-blue-soft); color: var(--xy-blue-ink); } .st-fee { background: var(--xy-green-soft); color: var(--xy-green-ink); } .st-min { background: var(--xy-amber-soft); color: var(--xy-amber-ink); } .biz-card.is-closed .biz-body { opacity: .7; } .biz-banner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; padding: 3rem; border-radius: var(--xy-radius-xl); color: #fff; position: relative; overflow: hidden; background: radial-gradient(900px 400px at 100% 0%, rgba(217, 56, 30, .45), transparent 60%), linear-gradient(120deg, #16181D, #23262D); } .biz-banner::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent, #000 90%); pointer-events: none; } .bb-main, .bb-side { position: relative; z-index: 1; } .bb-main { display: flex; flex-direction: column; gap: 1rem; justify-content: center; } .bb-kicker { align-self: flex-start; background: rgba(255, 194, 61, .15); color: #FFC23D; border: 1px solid rgba(255, 194, 61, .35); padding: .35rem .8rem; border-radius: 999px; font-weight: 700; font-size: .8rem; } .bb-main h2 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-size: clamp(1.7rem, 3vw, 2.5rem); } .bb-main h2 em { font-style: normal; color: #FF8A6B; } .bb-main p { margin: 0; color: rgba(255, 255, 255, .75); max-width: 520px; } .bb-note { color: rgba(255, 255, 255, .6); font-size: .82rem; display: flex; gap: .4rem; align-items: center; } .bb-side { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-content: center; } .bb-stat { display: flex; gap: .75rem; align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: .9rem; } .bb-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--xy-primary); display: inline-flex; align-items: center; justify-content: center; } .bb-stat strong { display: block; font-size: 1.1rem; line-height: 1.1; } .bb-stat small { color: rgba(255, 255, 255, .65); font-size: .75rem; } @media (max-width: 991.98px) { .biz-banner { grid-template-columns: 1fr; padding: 1.75rem 1.25rem; } .bb-side { grid-template-columns: 1fr 1fr; } } .demo-box { border: 1px solid var(--xy-line); background: var(--xy-chip); border-radius: 16px; padding: 1rem; } .demo-title { font-weight: 800; font-size: .9rem; } .demo-title i { color: #E7A21A; } .demo-title span { font-weight: 500; color: var(--xy-muted); font-size: .78rem; } .demo-group { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--xy-faint); font-weight: 700; margin: .8rem 0 .35rem; } .demo-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .demo-chip { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--xy-line-strong); background: #fff; border-radius: 12px; padding: .4rem .7rem; line-height: 1.2; cursor: pointer; transition: .15s; } .demo-chip strong { font-size: .8rem; } .demo-chip small { color: var(--xy-muted); font-size: .7rem; } .demo-chip:hover { border-color: var(--xy-primary); transform: translateY(-1px); } .demo-chip.active { background: var(--xy-ink); border-color: var(--xy-ink); color: #fff; } .demo-chip.active small { color: #C9CBD1; } .biz-rate { color: var(--xy-ink); } .biz-stats { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); } .biz-stat { gap: .4rem; padding: .45rem .5rem; } .demo-chip { color: var(--xy-ink); } .demo-chip.active strong { color: #fff; } /* İşletme çalışma saatleri editörü */ .hours-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0; } .hours-presets .btn { border-radius: 999px; font-size: .75rem; font-weight: 600; } .hours-now { font-size: .75rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; background: var(--xy-chip); color: var(--xy-muted); } .hours-now.open { background: var(--xy-green-soft); color: var(--xy-green-ink); } .hours-now.closed { background: var(--xy-red-soft); color: var(--xy-red-ink); } .hours-now.paused { background: var(--xy-amber-soft); color: var(--xy-amber-ink); } .hours-list { display: flex; flex-direction: column; gap: .5rem; } .hours-row { border: 1px solid var(--xy-line); border-radius: 14px; padding: .65rem .8rem; background: #fff; transition: .15s; } .hours-row.is-today { border-color: var(--xy-primary); box-shadow: 0 0 0 3px rgba(217, 56, 30, .08); } .hours-row.is-closed { background: var(--xy-chip); } .hours-head { display: flex; align-items: center; gap: .6rem; } .hours-day { font-weight: 700; font-size: .9rem; cursor: pointer; margin: 0; } .hours-state { font-size: .68rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--xy-green-soft); color: var(--xy-green-ink); } .hours-row.is-closed .hours-state { background: var(--xy-red-soft); color: var(--xy-red-ink); } .hours-today { display: none; margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--xy-primary); } .hours-row.is-today .hours-today { display: inline; } .hours-times { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; } .hours-time { position: relative; flex: 1 1 0; min-width: 0; } .hours-time > i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--xy-faint); font-size: .85rem; pointer-events: none; } .hours-time .form-control { padding-left: 1.9rem; font-weight: 600; } .hours-sep { color: var(--xy-faint); } .hours-dur { flex: 0 0 auto; min-width: 3.6rem; text-align: right; font-size: .72rem; color: var(--xy-muted); font-weight: 600; } .hours-row.is-closed .hours-times { opacity: .45; } .hours-row.is-closed .hours-time .form-control { pointer-events: none; } .hours-bar { position: relative; height: 6px; border-radius: 999px; background: var(--xy-chip); margin-top: .55rem; overflow: hidden; } .hours-row.is-closed .hours-bar { background: var(--xy-line); } .hours-fill { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #12A06B, #0E7A52); border-radius: 999px; } .hours-scale { display: flex; justify-content: space-between; font-size: .65rem; color: var(--xy-faint); margin-top: .35rem; padding: 0 .8rem; } .hours-times { flex-wrap: wrap; } .hours-time { flex: 1 1 96px; } .hours-time .form-control { padding-left: 1.7rem; padding-right: .4rem; min-width: 84px; } .hours-time input[type=time]::-webkit-calendar-picker-indicator { display: none; } .hours-dur { flex: 1 0 100%; text-align: left; min-width: 0; } .hours-dur:empty { display: none; } /* Ödeme yöntemleri */ .pm-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff; background: #6B7280; } .pm-ico.sm { width: 26px; height: 26px; flex-basis: 26px; border-radius: 8px; font-size: .8rem; } .pm-ico.brand-card { background: #1F4FD1; } .pm-ico.brand-cash { background: #0E7A52; } .pm-ico.brand-edenred { background: #D9381E; } .pm-ico.brand-multinet { background: #19A05A; } .pm-ico.brand-setcard { background: #1B3A8C; } .pm-ico.brand-pluxee { background: #0B6FBF; } .pm-ico.brand-metropol { background: #6B4CC2; } .pm-ico.brand-tokenflex { background: #F08A1C; } .pay-group-title { font-weight: 800; font-size: .85rem; margin-bottom: .6rem; display: flex; align-items: baseline; gap: .5rem; } .pay-group-title small { font-weight: 500; color: var(--xy-muted); font-size: .75rem; } .pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; } .pay-opt { position: relative; display: flex; align-items: center; gap: .65rem; border: 1.5px solid var(--xy-line); border-radius: 14px; padding: .6rem .7rem; cursor: pointer; transition: .15s; background: #fff; margin: 0; } .pay-opt:hover { border-color: var(--xy-line-strong); } .pay-opt input { position: absolute; opacity: 0; } .pay-opt-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .pay-opt-body strong { font-size: .85rem; } .pay-opt-body small { color: var(--xy-muted); font-size: .72rem; } .pay-check { margin-left: auto; color: var(--xy-primary); font-size: 1.1rem; opacity: 0; transition: .15s; } .pay-opt:has(input:checked) { border-color: var(--xy-primary); background: var(--xy-red-soft); box-shadow: 0 0 0 3px rgba(217, 56, 30, .1); } .pay-opt:has(input:checked) .pay-check { opacity: 1; } .pay-opt:has(input:focus-visible) { outline: 2px solid var(--xy-ink); outline-offset: 2px; } .pm-list { display: flex; flex-direction: column; gap: .4rem; } .pm-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; border: 1px solid var(--xy-line); border-radius: 12px; padding: .45rem .65rem; background: #fff; } .pm-row:has(input.pm-toggle:checked) { border-color: var(--xy-green); background: var(--xy-green-soft); } .pm-row.is-unavailable { opacity: .55; } .pm-check { display: flex; align-items: center; gap: .6rem; margin: 0; cursor: pointer; flex: 1 1 200px; } .pm-name { font-weight: 600; font-size: .85rem; } .pm-off { font-style: normal; font-size: .68rem; background: var(--xy-amber-soft); color: var(--xy-amber-ink); padding: .1rem .4rem; border-radius: 999px; margin-left: .25rem; } .pm-ref { max-width: 170px; } .biz-info { display: flex; flex-wrap: wrap; gap: 0; margin-top: 1rem; border-top: 1px solid var(--xy-line); padding-top: .9rem; } .biz-info-item { display: flex; flex-direction: column; gap: .1rem; padding: 0 1.5rem; border-left: 1px solid var(--xy-line); } .biz-info-item:first-child { padding-left: 0; border-left: 0; } .biz-info-item small { color: var(--xy-muted); font-size: .78rem; } .biz-info-item strong { font-size: 1rem; } .biz-free { background: var(--xy-green); color: #fff; font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; align-self: flex-start; } .biz-pay { margin-top: 1rem; } .biz-pay-title { color: var(--xy-muted); font-size: .8rem; margin-bottom: .4rem; } .biz-pay-chips { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-bottom: .5rem; } .pay-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; background: var(--xy-chip); border-radius: 999px; padding: .2rem .7rem .2rem .25rem; } .pay-cod-link { border: 0; background: transparent; padding: 0; font-weight: 700; font-size: .88rem; color: var(--xy-ink); display: inline-flex; align-items: center; gap: .4rem; } .pay-cod-link:hover { color: var(--xy-primary); } .cod-list li { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 10px; font-size: .9rem; } .cod-list li:nth-child(odd) { background: var(--xy-chip); } @media (max-width: 575.98px) { .biz-info-item { padding: 0 .9rem; } } /* Görsel yükleme alanları */ .img-slots { display: grid; gap: 1rem; margin-bottom: 1rem; } .img-slot { border: 1px solid var(--xy-line); border-radius: 14px; padding: .8rem; background: #fff; } .img-slot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-size: .88rem; } .img-size { font-size: .72rem; font-weight: 700; background: var(--xy-blue-soft); color: var(--xy-blue-ink); padding: .15rem .55rem; border-radius: 999px; } .img-prev { background: var(--xy-chip) center / cover no-repeat; border-radius: 10px; margin-bottom: .6rem; display: flex; align-items: center; justify-content: center; color: var(--xy-faint); font-size: .85rem; border: 1px dashed var(--xy-line-strong); } .img-prev-cover { aspect-ratio: 1294 / 160; width: 100%; } .img-prev-list { aspect-ratio: 419 / 150; width: min(100%, 419px); } .img-prev-logo { width: 84px; height: 84px; border-radius: 16px; } .biz-cover[style*="background-image"] > .bi-shop { display: none; } /* İşletme detay başlığı */ .bz { background: #fff; border: 1px solid var(--xy-line); border-radius: var(--xy-radius-lg); overflow: hidden; box-shadow: 0 18px 40px -30px rgba(22, 24, 29, .5); } .bz-cover { position: relative; height: 160px; background: linear-gradient(135deg, #F7D2C4, #F0A68B 60%, #E8795A) center / cover no-repeat; } .bz-cover.closed { filter: grayscale(.55); } .bz-cover-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3.4rem; color: rgba(255, 255, 255, .55); } .bz-cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 24, 29, .18), transparent 40%, rgba(22, 24, 29, .38)); } .bz-cover-actions { position: absolute; top: .9rem; right: .9rem; display: flex; gap: .5rem; } .bz-round { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--xy-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); transition: .15s; } .bz-round:hover { transform: scale(1.06); } .bz-body { padding: 0 1.5rem 1.4rem; } .bz-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .bz-logo { width: 84px; height: 84px; flex: 0 0 84px; margin-top: -42px; border-radius: 22px; background: var(--xy-ink); color: #fff; border: 4px solid #fff; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; overflow: hidden; position: relative; z-index: 2; } .bz-logo img { width: 100%; height: 100%; object-fit: cover; } .bz-title { flex: 1 1 320px; min-width: 0; padding-top: .9rem; } .bz-name-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .bz-name-row h1 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; } .bz-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; } .bz-status .bi { font-size: .45rem; } .bz-status.open { background: var(--xy-green-soft); color: var(--xy-green-ink); } .bz-status.open .bi { color: #19B36E; } .bz-status.closed { background: var(--xy-red-soft); color: var(--xy-red-ink); } .bz-status.closed .bi { color: var(--xy-primary); } .bz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .45rem; color: var(--xy-muted); font-size: .86rem; } .bz-meta .bi { margin-right: .2rem; } .bz-tag { text-decoration: none; background: var(--xy-chip); color: var(--xy-ink); padding: .15rem .6rem; border-radius: 999px; font-weight: 600; font-size: .78rem; } .bz-tag:hover { background: var(--xy-line); color: var(--xy-ink); } .bz-rating { text-align: center; padding: .9rem 0 0 .5rem; } .bz-rating-score { display: inline-flex; align-items: center; gap: .35rem; background: var(--xy-ink); color: #fff; font-weight: 800; font-size: 1.15rem; border-radius: 12px; padding: .3rem .8rem; } .bz-rating-score .bi { color: #FFC23D; font-size: .95rem; } .bz-rating-score.new { background: var(--xy-green); font-size: .95rem; } .bz-rating small { display: block; color: var(--xy-muted); font-size: .72rem; margin-top: .3rem; } .bz-desc { margin: 1rem 0 0; color: #3b3f48; max-width: 760px; } .bz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin-top: 1.25rem; } .bz-tile { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--xy-line); border-radius: 16px; padding: .9rem; background: #fff; transition: .15s; } .bz-tile:hover { border-color: var(--xy-line-strong); box-shadow: 0 10px 22px -16px rgba(22, 24, 29, .5); } .bz-tile-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; } .t-hours .bz-tile-ico { background: var(--xy-blue-soft); color: var(--xy-blue); } .t-min .bz-tile-ico { background: var(--xy-amber-soft); color: #B7791F; } .t-eta .bz-tile-ico { background: var(--xy-sky-soft); color: var(--xy-sky); } .t-fee .bz-tile-ico { background: var(--xy-green-soft); color: var(--xy-green); } .bz-tile small { display: block; color: var(--xy-muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .bz-tile strong { display: block; font-size: 1.1rem; letter-spacing: -.01em; margin: .1rem 0; } .bz-sub { display: block; color: var(--xy-faint); font-size: .75rem; } .bz-link { font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--xy-primary); } .bz-link .bi { font-size: .65rem; } .bz-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin-top: .75rem; } .bz-day { display: flex; justify-content: space-between; align-items: center; gap: .5rem; background: var(--xy-chip); border-radius: 10px; padding: .45rem .7rem; font-size: .82rem; } .bz-day.today { background: var(--xy-ink); color: #fff; } .bz-day.off strong { color: var(--xy-primary); } .bz-pay { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--xy-line); } .bz-pay-title { font-weight: 700; font-size: .85rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .45rem; color: var(--xy-ink); } .bz-pay-chips { display: flex; flex-wrap: wrap; gap: .45rem; } .pay-chip { border: 1px solid var(--xy-line); background: #fff; } .pay-chip-btn { cursor: pointer; font-family: inherit; } .pay-chip-btn b { background: var(--xy-ink); color: #fff; border-radius: 999px; font-size: .68rem; padding: .05rem .4rem; } .pay-chip-btn:hover { border-color: var(--xy-ink); } .bz-promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; } .bz-promo { display: flex; gap: .75rem; align-items: center; background: linear-gradient(120deg, #FFF3DC, #FFE7C2); border: 1px solid #F5D9A6; border-radius: 16px; padding: .8rem 1rem; } .bz-promo-ico { width: 38px; height: 38px; border-radius: 11px; background: #E7A21A; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; } .bz-promo strong { display: block; font-size: .9rem; color: #5C3B00; } .bz-promo span:not(.bz-promo-ico) { font-size: .8rem; color: #7A5A1F; } @media (max-width: 575.98px) { .bz-body { padding: 0 1rem 1.1rem; } .bz-rating { padding-left: 0; } .bz-logo { width: 72px; height: 72px; flex-basis: 72px; margin-top: -36px; } } .bz-round .bi-heart-fill { color: var(--xy-primary); } /* Business header: compact override */ .bz-cover { height: 160px; } .bz-cover-actions { top: .6rem; right: .6rem; } .bz-round { width: 34px; height: 34px; font-size: .9rem; } .bz-body { padding: 0 1.25rem .9rem; } .bz-head { gap: .85rem; flex-wrap: nowrap; align-items: center; } .bz-logo { width: 64px; height: 64px; flex: 0 0 64px; margin-top: -26px; border-radius: 16px; border-width: 3px; font-size: 1.5rem; align-self: flex-start; } .bz-title { flex: 1 1 auto; padding-top: .6rem; } .bz-name-row h1 { font-size: clamp(1.15rem, 2vw, 1.4rem); } .bz-status { font-size: .7rem; padding: .15rem .55rem; } .bz-meta { margin-top: .25rem; font-size: .8rem; gap: .25rem .8rem; } .bz-tag { font-size: .72rem; padding: .08rem .5rem; } .bz-desc { margin: .2rem 0 0; font-size: .82rem; color: var(--xy-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bz-rating { padding: .6rem 0 0; flex: 0 0 auto; text-align: right; } .bz-rating-score { font-size: .95rem; padding: .2rem .6rem; border-radius: 10px; } .bz-rating small { font-size: .68rem; margin-top: .2rem; } .bz-tiles { display: flex; flex-wrap: wrap; margin-top: .8rem; gap: 0; border: 1px solid var(--xy-line); border-radius: 12px; overflow: hidden; } .bz-tile { flex: 1 1 170px; align-items: center; gap: .6rem; border: 0; border-radius: 0; padding: .55rem .8rem; border-left: 1px solid var(--xy-line); } .bz-tile:first-child { border-left: 0; } .bz-tile:hover { box-shadow: none; background: #fafafa; } .bz-tile-ico { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; font-size: .9rem; } .bz-tile small { font-size: .66rem; } .bz-tile strong { font-size: .92rem; margin: 0; display: inline; } .bz-tile .bz-link { margin-left: .35rem; font-size: .72rem; } .bz-week { margin-top: .5rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .35rem; } .bz-day { padding: .3rem .55rem; font-size: .76rem; border-radius: 8px; } .bz-pay { margin-top: .7rem; padding-top: .7rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .bz-pay-title { margin: 0; font-size: .78rem; color: var(--xy-muted); white-space: nowrap; } .bz-pay-chips { gap: .3rem; } .bz-pay .pay-chip { font-size: .72rem; padding: .18rem .55rem .18rem .25rem; gap: .35rem; } .bz-pay .pm-ico.sm { width: 20px; height: 20px; font-size: .68rem; } @media (max-width: 575.98px) { .bz-head { flex-wrap: wrap; } .bz-logo { width: 56px; height: 56px; flex-basis: 56px; margin-top: -24px; } .bz-tile { flex-basis: 45%; border-left: 0; border-top: 1px solid var(--xy-line); } .bz-desc { white-space: normal; } } .bz-tile .bz-link { white-space: nowrap; } /* Business page: reviews, offers, side menu, product cards, cart offcanvas */ button.bz-rating { background: none; border: 0; cursor: pointer; font-family: inherit; color: inherit; } button.bz-rating:hover .bz-rating-score { background: #000; } .bz-rating small .bi { font-size: .6rem; } .offers-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; } .offers-head h2 { margin: 0; font-size: 1rem; font-weight: 700; } .offers-nav { display: flex; gap: .35rem; } .offers-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--xy-line); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; } .offers-btn:hover { border-color: var(--xy-ink); } .offers-track { display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .3rem; scrollbar-width: none; } .offers-track::-webkit-scrollbar { display: none; } .offer { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: .65rem; padding: .55rem .9rem; border-radius: 12px; background: #fff; border: 1px solid var(--xy-line); text-align: left; font-family: inherit; min-width: 190px; } .offer strong, .offer small { display: block; } .offer-coupon { border-color: #BFE3CC; background: #F6FCF8; cursor: pointer; } .offer-coupon:hover { background: #ECF8F1; } .offer-amt { font-size: 1.05rem; color: var(--xy-green-ink); white-space: nowrap; } .offer-coupon span .bi { color: var(--xy-green); } .offer-coupon em { font-style: normal; font-size: .72rem; font-weight: 700; background: #fff; border: 1px dashed #9AD3B1; border-radius: 6px; padding: 0 .35rem; margin-left: .2rem; color: var(--xy-green-ink); } .offer-coupon strong { font-size: .88rem; } .offer-camp { border-color: #F5D9A6; background: #FFF8EA; } .offer-ico { width: 32px; height: 32px; border-radius: 10px; background: #E7A21A; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; } .offer-camp strong { font-size: .88rem; color: #5C3B00; } .offer-camp small { font-size: .75rem; color: #7A5A1F; } .menu-nav { position: sticky; top: 92px; } .menu-nav-title { font-weight: 800; font-size: 1.05rem; margin-bottom: .6rem; } .menu-nav-list { background: #fff; border: 1px solid var(--xy-line); border-radius: 16px; padding: .4rem; display: flex; flex-direction: column; max-height: calc(100vh - 170px); overflow-y: auto; } .menu-nav-list a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: 10px; color: var(--xy-ink); text-decoration: none; font-weight: 600; font-size: .9rem; border-left: 3px solid transparent; } .menu-nav-list a small { color: var(--xy-faint); font-weight: 600; font-size: .72rem; } .menu-nav-list a:hover { background: var(--xy-chip); } .menu-nav-list a.active { background: var(--xy-chip); border-left-color: var(--xy-ink); } .menu-h { font-size: 1.15rem; font-weight: 800; margin: 0 0 .8rem; scroll-margin-top: 100px; } @media (max-width: 991.98px) { .menu-nav { position: sticky; top: 64px; z-index: 5; background: var(--xy-bg, #f5f5f3); margin: 0 -.25rem; padding: .4rem .25rem; } .menu-nav-title { display: none; } .menu-nav-list { flex-direction: row; overflow-x: auto; max-height: none; border-radius: 999px; padding: .3rem; gap: .2rem; scrollbar-width: none; } .menu-nav-list a { white-space: nowrap; border-left: 0; border-radius: 999px; padding: .4rem .85rem; } .menu-nav-list a small { display: none; } } .pcard { display: flex; gap: .85rem; background: #fff; border: 1px solid var(--xy-line); border-radius: 16px; padding: .7rem; cursor: pointer; height: 100%; transition: .15s; } .pcard:hover { border-color: var(--xy-ink); box-shadow: 0 10px 22px -16px rgba(22, 24, 29, .5); } .pcard.is-out { opacity: .55; cursor: default; } .pcard-thumb { position: relative; flex: 0 0 104px; width: 104px; height: 104px; border-radius: 12px; background: #FDE4D8 center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--xy-primary); font-size: 1.8rem; } .pcard-off { position: absolute; top: 6px; left: 6px; background: var(--xy-primary); color: #fff; font-size: .68rem; font-weight: 800; padding: .1rem .4rem; border-radius: 6px; } .pcard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .pcard-name { font-weight: 700; font-size: .95rem; line-height: 1.25; } .pcard-desc { color: var(--xy-muted); font-size: .8rem; margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .5rem; } .pcard-price del { display: block; color: var(--xy-faint); font-size: .76rem; line-height: 1; } .pcard-price strong { font-size: 1rem; } .pcard-add { border: 1.5px solid var(--xy-ink); background: #fff; color: var(--xy-ink); font-weight: 700; font-size: .78rem; border-radius: 999px; padding: .25rem .8rem; } .pcard:hover .pcard-add { background: var(--xy-ink); color: #fff; } .rv-summary { border: 1px solid var(--xy-line); border-radius: 16px; padding: 1rem 1.2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; } .rv-score { display: flex; align-items: center; gap: 1rem; font-size: .85rem; color: var(--xy-muted); } .rv-score-badge { background: var(--xy-green); color: #fff; font-weight: 800; font-size: 1.7rem; border-radius: 14px; padding: .4rem 1rem; white-space: nowrap; } .rv-score-badge .bi { font-size: 1.3rem; } .rv-sub { display: grid; gap: .3rem; } .rv-sub-row { display: grid; grid-template-columns: 70px auto 36px; align-items: center; gap: .6rem; font-size: .85rem; } .rv-stars { color: #F2A900; font-size: .9rem; letter-spacing: 1px; } .rv-search { position: relative; margin: 1rem 0 .7rem; } .rv-search .bi { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--xy-muted); } .rv-search input { border-radius: 999px; padding: .6rem 1rem; } .rv-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; } .rv-chip { border: 1px solid var(--xy-line-strong, #cfd2d8); background: #fff; border-radius: 999px; padding: .3rem .85rem; font-size: .82rem; font-weight: 600; } .rv-chip.active { background: var(--xy-ink); border-color: var(--xy-ink); color: #fff; } .rv-card { border: 1px solid var(--xy-line); border-radius: 14px; padding: .8rem 1rem; margin-bottom: .7rem; } .rv-card header { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; font-size: .85rem; } .rv-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; color: var(--xy-muted); } .rv-pills { display: flex; gap: .7rem; color: var(--xy-muted); } .rv-pills b { color: var(--xy-ink); } .rv-card time { margin-left: auto; color: var(--xy-faint); font-size: .75rem; } .rv-card p { margin: .5rem 0 0; font-size: .9rem; } .cart-canvas { width: min(420px, 100vw); } .cart-canvas .offcanvas-header { border-bottom: 1px solid var(--xy-line); } /* Product detail modal */ #productModal .modal-content { border-radius: 22px; border: 0; } #productModal .modal-body { padding: 0; } #pmBody { display: flex; flex-direction: column; } .pm-top { display: flex; gap: 1.1rem; padding: 1.25rem 1.5rem 1rem; flex-wrap: wrap; } .pm-img { flex: 0 0 200px; width: 200px; height: 170px; border-radius: 16px; background: #FDE4D8 center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--xy-primary); font-size: 2.4rem; } .pm-info { flex: 1 1 220px; min-width: 0; } .pm-info h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; } .pm-info p { color: var(--xy-muted); font-size: .88rem; margin: 0 0 .7rem; } .pm-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .pm-price strong { font-size: 1.15rem; } .pm-price del { color: var(--xy-faint); font-size: .9rem; } .pm-price small { color: var(--xy-muted); } .pm-off { background: var(--xy-primary); color: #fff; font-size: .7rem; font-weight: 800; padding: .1rem .45rem; border-radius: 6px; } .pm-group { padding: .9rem 1.5rem 1rem; border-top: 8px solid var(--xy-chip); } .pm-group header { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .pm-group header h6 { margin: 0; font-weight: 800; font-size: 1rem; } .pm-group header small { margin-left: auto; color: var(--xy-faint); font-size: .75rem; } .pm-req, .pm-opt { font-size: .68rem; font-weight: 700; border-radius: 6px; padding: .12rem .5rem; } .pm-req { background: var(--xy-red-soft); color: var(--xy-red-ink); } .pm-opt { background: var(--xy-chip); color: var(--xy-muted); } .pm-choice { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border: 1px solid var(--xy-line); border-radius: 12px; margin-bottom: .4rem; cursor: pointer; transition: .12s; } .pm-choice:hover { border-color: var(--xy-ink); } .pm-choice:has(input:checked) { border-color: var(--xy-ink); background: #FAFAF8; box-shadow: inset 0 0 0 1px var(--xy-ink); } .pm-choice .form-check-input { margin: 0; flex: 0 0 auto; } .pm-choice .form-check-input:checked { background-color: var(--xy-ink); border-color: var(--xy-ink); } .pm-choice-name { flex: 1; font-weight: 600; font-size: .92rem; } .pm-choice-price { color: var(--xy-muted); font-size: .85rem; font-weight: 600; } .pm-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 1rem; padding: .9rem 1.5rem; background: #fff; border-top: 1px solid var(--xy-line); box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .4); flex-wrap: wrap; } .pm-qty { display: inline-flex; align-items: center; border: 1px solid var(--xy-line-strong, #cfd2d8); border-radius: 999px; overflow: hidden; } .pm-qty button { width: 38px; height: 40px; border: 0; background: none; font-size: 1rem; } .pm-qty button:hover { background: var(--xy-chip); } .pm-qty input { width: 40px; border: 0; text-align: center; font-weight: 700; background: none; outline: 0; } .pm-foot-total small { display: block; color: var(--xy-muted); font-size: .72rem; } .pm-foot-total strong { font-size: 1.15rem; } .pm-add { margin-left: auto; flex: 1 1 160px; max-width: 260px; text-align: center; text-decoration: none; background: var(--xy-ink); color: #fff; border: 0; border-radius: 999px; padding: .75rem 1.4rem; font-weight: 700; } .pm-add:hover { background: #000; color: #fff; } .pm-add:disabled { background: #9aa0a8; } .pm-note { margin-left: auto; color: var(--xy-muted); font-size: .8rem; } @media (max-width: 575.98px) { .pm-img { flex-basis: 100%; width: 100%; } .pm-top, .pm-group, .pm-foot { padding-left: 1rem; padding-right: 1rem; } } /* Cart panel (offcanvas, cart page, checkout) */ .cart-canvas { width: min(440px, 100vw); } .cart-canvas .offcanvas-body { padding: 0; display: flex; flex-direction: column; min-height: 0; } .cart-canvas .cart-host { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .cart-canvas .cp-scroll { flex: 1 1 auto; overflow-y: auto; } .cart-canvas .cp-foot { flex: 0 0 auto; box-shadow: 0 -12px 28px -20px rgba(0, 0, 0, .45); } .cp-empty { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 3.5rem 1rem; color: var(--xy-muted); text-align: center; } .cp-empty .bi { font-size: 2.4rem; color: var(--xy-faint); } .cp-empty strong { color: var(--xy-ink); } .cp-top { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.25rem .4rem; } .cp-count { font-weight: 700; font-size: .85rem; color: var(--xy-muted); } .cp-clear { border: 0; background: none; color: var(--xy-red-ink); font-size: .8rem; font-weight: 600; } .cp-biz { display: flex; align-items: center; gap: .75rem; margin: .25rem 1.25rem .7rem; padding: .6rem .75rem; border: 1px solid var(--xy-line); border-radius: 14px; text-decoration: none; color: var(--xy-ink); } .cp-biz:hover { border-color: var(--xy-ink); color: var(--xy-ink); } .cp-biz-logo { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--xy-ink); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cp-biz-logo img { width: 100%; height: 100%; object-fit: cover; } .cp-biz-info { flex: 1; min-width: 0; } .cp-biz-info strong { display: block; font-size: .95rem; } .cp-biz-info small { color: var(--xy-muted); font-size: .76rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; } .cp-rate { background: var(--xy-green); color: #fff; border-radius: 5px; padding: 0 .35rem; font-size: .7rem; } .cp-rate .bi { font-size: .6rem; } .cp-coupon { margin: 0 1.25rem .6rem; } .cp-coupon-toggle { width: 100%; border: 1.5px dashed #E2A08C; background: #FFF6F2; color: var(--xy-ink); font-weight: 700; font-size: .85rem; border-radius: 12px; padding: .55rem; } .cp-coupon-form { display: none; } .cp-coupon.open .cp-coupon-form { display: flex; } .cp-coupon.open .cp-coupon-toggle { display: none; } .cp-coupon-on { display: flex; align-items: center; gap: .6rem; background: var(--xy-green-soft); color: var(--xy-green-ink); border-radius: 12px; padding: .55rem .8rem; font-size: .85rem; } .cp-coupon-on span { flex: 1; } .cp-coupon-on button { border: 0; background: none; color: var(--xy-red-ink); font-weight: 600; font-size: .8rem; } .cp-items { list-style: none; margin: 0; padding: 0 1.25rem; } .cp-item { display: flex; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--xy-line); } .cp-thumb { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; background: #FDE4D8 center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--xy-primary); } .cp-item-main { flex: 1; min-width: 0; } .cp-item-name { font-weight: 700; font-size: .92rem; } .cp-item-name span { color: var(--xy-muted); font-weight: 500; } .cp-item-sub { color: var(--xy-muted); font-size: .76rem; } .cp-item-row { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; } .cp-stepper { display: inline-flex; align-items: center; gap: .55rem; } .cp-stepper button { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--xy-ink); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; padding: 0; } .cp-stepper button:hover { background: var(--xy-ink); color: #fff; } .cp-stepper span { min-width: 18px; text-align: center; font-weight: 700; } .cp-suggest { background: var(--xy-chip); margin-top: 1rem; padding: 1rem 1.25rem; } .cp-suggest-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; } .cp-suggest-head h6 { margin: 0; font-weight: 800; } .cp-suggest-head h6 .bi { color: var(--xy-primary); } .cp-suggest-nav { border: 0; background: none; font-size: .85rem; } .cp-suggest-track { display: flex; gap: .7rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .cp-suggest-track::-webkit-scrollbar { display: none; } .cp-sg { flex: 0 0 132px; scroll-snap-align: start; } .cp-sg-img { position: relative; height: 104px; border-radius: 14px; background: #FDE4D8 center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--xy-primary); font-size: 1.5rem; } .cp-suggest-add { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--xy-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .cp-sg-name { font-size: .8rem; font-weight: 600; margin-top: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-sg-price { font-size: .8rem; font-weight: 800; } .cp-warn { margin: .8rem 1.25rem 0; background: #FFF4E0; color: #7A5A1F; border-radius: 10px; padding: .5rem .75rem; font-size: .8rem; } .cp-foot { padding: .8rem 1.25rem 1.1rem; background: #fff; border-top: 1px solid var(--xy-line); } .cp-sum-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: none; padding: .2rem 0 .5rem; font-weight: 700; font-size: .88rem; } .cp-sum-toggle .bi { transition: .2s; } .cp-sum-toggle.collapsed .bi { transform: rotate(180deg); } .cp-sum-body dl { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; font-size: .85rem; margin: 0 0 .5rem; color: var(--xy-muted); } .cp-sum-body dd { margin: 0; text-align: right; color: var(--xy-ink); } .cp-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--xy-line); padding-top: .55rem; margin-bottom: .7rem; } .cp-total strong { font-size: 1.2rem; } .cp-checkout { display: block; text-align: center; background: var(--xy-ink); color: #fff; font-weight: 700; border-radius: 999px; padding: .85rem; text-decoration: none; } .cp-checkout:hover { background: #000; color: #fff; } .cp-checkout.disabled { background: #9aa0a8; pointer-events: none; } /* Product modal refinements */ .pm-top.is-simple { padding-bottom: 1.4rem; } .pm-top.is-simple .pm-img { flex-basis: 132px; width: 132px; height: 132px; } .pm-cat { display: inline-block; background: var(--xy-chip); color: var(--xy-muted); font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .1rem .6rem; margin-bottom: .45rem; } .pm-save { margin-top: .5rem; color: var(--xy-green-ink); font-size: .8rem; font-weight: 600; } .pm-low { margin-top: .4rem; color: var(--xy-primary); font-size: .8rem; font-weight: 700; } #productModal .modal-dialog:not(.modal-lg) { max-width: 460px; } @media (max-width: 575.98px) { .pm-top.is-simple .pm-img { flex-basis: 96px; width: 96px; height: 96px; } .pm-top.is-simple { flex-wrap: nowrap; } } /* Business listing card (v4) */ .bc { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--xy-line); border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none; transition: .18s; } .bc:hover { color: inherit; border-color: var(--xy-line-strong); box-shadow: 0 16px 30px -22px rgba(22, 24, 29, .5); transform: translateY(-2px); } .bc-cover { position: relative; aspect-ratio: 419 / 150; background: linear-gradient(135deg, #F7D2C4, #F0A68B 60%, #E8795A) center / cover no-repeat; } .bc.is-closed .bc-cover { filter: grayscale(.7); } .bc-cover-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; color: rgba(255, 255, 255, .55); } .bc-ribbon { position: absolute; left: 0; top: 10px; background: var(--xy-primary); color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .65rem .25rem .5rem; border-radius: 0 8px 8px 0; display: inline-flex; align-items: center; gap: .35rem; max-width: 85%; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); } .bc-logo { position: absolute; left: 10px; bottom: 10px; width: 40px; height: 40px; background: #fff; border-radius: 10px; padding: 3px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .55); overflow: hidden; } .bc-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; } .bc-feat { position: absolute; right: 10px; bottom: 10px; background: rgba(22, 24, 29, .78); color: #fff; font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; backdrop-filter: blur(4px); } .bc-closed { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(22, 24, 29, .8); color: #fff; font-weight: 700; font-size: .8rem; padding: .3rem .8rem; border-radius: 999px; white-space: nowrap; } .bc-body { padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .4rem; } .bc-title { display: flex; align-items: center; gap: .55rem; min-width: 0; } .bc-title h3 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bc-rate { flex: 0 0 auto; font-weight: 800; font-size: .76rem; color: #fff; border-radius: 6px; padding: .12rem .4rem; white-space: nowrap; } .bc-rate small { font-weight: 500; opacity: .85; font-size: .68rem; } .bc-rate.r-hi { background: #1E8E4E; } .bc-rate.r-mid { background: #D98E0B; } .bc-rate.r-lo { background: #C8452B; } .bc-rate.r-new { background: var(--xy-chip); color: var(--xy-muted); } .bc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; color: var(--xy-muted); font-size: .8rem; } .bc-meta > span + span::before { content: "·"; margin-right: .45rem; color: var(--xy-faint); } .bc-eta { color: var(--xy-green-ink); background: var(--xy-green-soft); border-radius: 6px; padding: 0 .4rem; font-weight: 600; } .bc-meta > .bc-eta + span::before { content: none; } .bc-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .bc-fee { font-size: .8rem; color: var(--xy-muted); display: flex; align-items: center; gap: .35rem; } .bc-fee.free { color: var(--xy-green-ink); font-weight: 600; } .bc-promos { display: flex; flex-wrap: wrap; gap: .3rem; } .bc-promo { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .15rem .6rem; display: inline-flex; align-items: center; gap: .3rem; background: #E7F6EC; color: #176B3A; } .bc-promo.pr-campaign { background: #FFF1D6; color: #7A5A1F; } .bc.is-closed .bc-body { opacity: .75; } /* Courier badge (Nar Kurye / own) */ .cb { position: relative; display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; outline: 0; } .cb b { font-weight: 800; } .cb-nar b { color: #B3151B; } .cb-own b { color: var(--xy-ink); } .cb-bike { width: 18px; height: 18px; border-radius: 6px; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; } .cb-info { font-size: .72rem; color: var(--xy-faint); } .cb-bubble { position: absolute; left: 0; bottom: calc(100% + 10px); width: 270px; z-index: 30; display: flex; gap: .65rem; align-items: flex-start; background: #fff; color: var(--xy-ink); border: 1px solid #F3C4C1; border-left: 4px solid #D5242B; border-radius: 12px; padding: .65rem .8rem; box-shadow: 0 18px 34px -16px rgba(22, 24, 29, .55); font-size: .78rem; font-weight: 500; line-height: 1.4; white-space: normal; text-align: left; opacity: 0; visibility: hidden; transform: translateY(4px); transition: .15s; pointer-events: none; } .cb-own .cb-bubble { border-color: var(--xy-line); border-left-color: var(--xy-ink); } .cb-bubble img { flex: 0 0 28px; } .cb-bubble-ico { flex: 0 0 28px; height: 28px; border-radius: 8px; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; } .cb-bubble::after { content: ""; position: absolute; left: 22px; bottom: -6px; width: 10px; height: 10px; background: #fff; border-right: 1px solid #F3C4C1; border-bottom: 1px solid #F3C4C1; transform: rotate(45deg); } .cb.has-tip:hover .cb-bubble, .cb.has-tip:focus .cb-bubble { opacity: 1; visibility: visible; transform: none; } .bz-tiles { overflow: visible; } .bz-tile:first-child { border-radius: 12px 0 0 12px; } .bz-tile:last-child { border-radius: 0 12px 12px 0; } .bz-tile .cb { margin-left: .35rem; vertical-align: middle; } /* Business settings: delivery mode */ .dm-box { border: 1px solid var(--xy-line); border-radius: 14px; padding: .9rem 1rem; } .dm-title { display: flex; flex-direction: column; margin-bottom: .6rem; } .dm-title small { color: var(--xy-muted); } .dm-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; } .dm-opt { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--xy-line); border-radius: 12px; padding: .7rem .8rem; cursor: pointer; } .dm-opt:has(input:checked) { border-color: var(--xy-ink); box-shadow: inset 0 0 0 1px var(--xy-ink); background: #FAFAF8; } .dm-opt small { display: block; color: var(--xy-muted); font-size: .76rem; } .dm-opt .form-check-input, .dm-opt input[type=radio] { flex: 0 0 auto; } .dm-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; } /* Listing card: delivery badge in the meta row */ .bc-meta { gap: .3rem .5rem; } .bc-meta > .cb-eta { display: inline-flex; padding: .12rem .5rem .12rem .3rem; border-radius: 8px; font-size: .76rem; margin-right: 0; } .bc-meta > .cb-eta + span::before { content: none; } .cb-eta.cb-nar { background: #FDECEB; } .cb-eta.cb-nar b { color: #B3151B; } .cb-eta.cb-own { background: var(--xy-chip); } .cb-eta.cb-own b { color: var(--xy-ink); } .cb-eta .cb-bike { background: none; width: auto; height: auto; font-size: .95rem; } .cb-eta img { width: 16px; height: 16px; } .bc-fee { color: var(--xy-muted); } .bc-fee.free { color: var(--xy-green-ink); font-weight: 700; } /* Login: courier account notice */ .courier-notice { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; border: 1px solid #F3D9A6; background: #FFF8EA; border-radius: 16px; } .courier-notice .cn-ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; background: #E7A21A; color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; } .courier-notice strong { font-size: 1.05rem; } .courier-notice p { margin: .3rem 0 .8rem; color: #5C4A1F; font-size: .9rem; } .courier-notice small { display: block; margin-top: .4rem; color: #7A5A1F; } .cn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } /* Business apply page */ .ap-hero { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center; padding: 3.2rem 3rem; border-radius: var(--xy-radius-xl, 28px); color: #fff; overflow: hidden; background: radial-gradient(800px 380px at 100% 0%, rgba(217, 56, 30, .5), transparent 60%), radial-gradient(600px 300px at 0% 100%, rgba(231, 162, 26, .22), transparent 60%), linear-gradient(120deg, #16181D, #23262D); margin-bottom: 3rem; } .ap-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, transparent, #000 85%); pointer-events: none; } .ap-hero > * { position: relative; z-index: 1; } .ap-eyebrow { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: .3rem .85rem; font-size: .8rem; font-weight: 600; } .ap-hero h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 1rem 0; } .ap-hero h1 span { background: linear-gradient(90deg, #FFB199, #FFD27A); -webkit-background-clip: text; background-clip: text; color: transparent; } .ap-hero p { color: rgba(255, 255, 255, .78); max-width: 560px; font-size: 1.02rem; } .ap-hero p strong { color: #fff; } .ap-hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin: 1.5rem 0 1.8rem; } .ap-cta { border-radius: 999px; font-weight: 700; padding: .75rem 1.5rem; } .ap-ghost { color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 600; } .ap-ghost:hover { color: #fff; } .ap-stats { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; } .ap-stats strong { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; } .ap-stats span { font-size: .8rem; color: rgba(255, 255, 255, .65); } .ap-hero-art { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; } .ap-mock { width: min(360px, 100%); background: #fff; color: var(--xy-ink); border-radius: 20px; padding: 1rem; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .7); transform: rotate(2deg); } .ap-mock-bar { display: flex; align-items: center; gap: .35rem; margin-bottom: .8rem; font-size: .75rem; color: var(--xy-muted); } .ap-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E5E7EB; } .ap-mock-bar span { margin-left: .5rem; font-weight: 600; } .ap-mock-order { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 1px solid var(--xy-line); border-radius: 12px; margin-bottom: .5rem; font-size: .82rem; } .ap-mock-order.new { border-color: #F2B6A8; background: #FFF6F2; } .ap-mock-order div { flex: 1; } .ap-mock-order strong { display: block; } .ap-mock-order small { color: var(--xy-muted); } .ap-mock-order .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--xy-primary); box-shadow: 0 0 0 4px rgba(217, 56, 30, .15); } .ap-mock-order .dot.warn { background: #E7A21A; box-shadow: 0 0 0 4px rgba(231, 162, 26, .18); } .ap-mock-order .dot.ok { background: #19B36E; box-shadow: 0 0 0 4px rgba(25, 179, 110, .15); } .ap-mock-chart { display: flex; align-items: flex-end; gap: .4rem; height: 70px; margin-top: .7rem; padding: .5rem .6rem; background: var(--xy-chip); border-radius: 12px; } .ap-mock-chart span { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #E8795A, #D9381E); } .ap-float { position: absolute; background: #fff; color: var(--xy-ink); border-radius: 999px; padding: .45rem .9rem; font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); } .ap-float.f1 { left: 4%; top: -4px; } .ap-float.f2 { right: -4px; bottom: 12%; } .ap-float.f1 .bi { color: var(--xy-primary); } .ap-float.f2 .bi { color: var(--xy-green); } .ap-section { margin-bottom: 3.4rem; } .ap-title { text-align: center; margin-bottom: 1.6rem; } .ap-title span { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--xy-primary); } .ap-title h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; margin: .3rem 0 0; } .ap-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; } .ap-benefit { background: #fff; border: 1px solid var(--xy-line); border-radius: 20px; padding: 1.4rem; transition: .2s; } .ap-benefit:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -26px rgba(22, 24, 29, .5); } .ap-benefit .ico { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .9rem; } .ap-benefit h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .35rem; } .ap-benefit p { margin: 0; color: var(--xy-muted); font-size: .9rem; } .c-green .ico { background: var(--xy-green-soft); color: var(--xy-green); } .c-red .ico { background: #FDECEB; color: #D5242B; } .c-blue .ico { background: var(--xy-blue-soft); color: var(--xy-blue); } .c-amber .ico { background: var(--xy-amber-soft); color: #B7791F; } .c-violet .ico { background: #EFE9FB; color: #6B4CC2; } .c-sky .ico { background: var(--xy-sky-soft); color: var(--xy-sky); } .ap-timeline { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; position: relative; } .ap-timeline li { position: relative; background: #fff; border: 1px solid var(--xy-line); border-radius: 18px; padding: 1.2rem 1.2rem 1.3rem; } .ap-timeline .n { width: 34px; height: 34px; border-radius: 50%; background: var(--xy-ink); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .7rem; } .ap-timeline h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .25rem; } .ap-timeline p { margin: 0; color: var(--xy-muted); font-size: .86rem; } .ap-grid { display: grid; grid-template-columns: 290px 1fr; gap: 1.4rem; align-items: start; } .ap-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 1rem; } .ap-side-card { background: #fff; border: 1px solid var(--xy-line); border-radius: 18px; padding: 1.1rem; } .ap-progress { height: 6px; background: var(--xy-chip); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; } .ap-progress div { height: 100%; width: 0; background: linear-gradient(90deg, #E8795A, #D9381E); border-radius: 999px; transition: width .3s; } .ap-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; } .ap-steps .s { display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem; border-radius: 12px; color: var(--xy-muted); } .ap-steps .n { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--xy-chip); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; } .ap-steps strong { display: block; font-size: .9rem; color: var(--xy-ink); line-height: 1.1; } .ap-steps small { font-size: .74rem; } .ap-steps .s.active { background: var(--xy-chip); } .ap-steps .s.active .n { background: var(--xy-ink); color: #fff; } .ap-steps .s.done .n { background: var(--xy-green); color: #fff; font-size: 0; } .ap-steps .s.done .n::before { content: "\F26E"; font-family: "bootstrap-icons"; font-size: .95rem; } .ap-need strong { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; } .ap-need ul { list-style: none; padding: 0; margin: 0 0 .6rem; font-size: .85rem; } .ap-need li { padding: .15rem 0; } .ap-need li .bi { color: var(--xy-green); margin-right: .3rem; } .ap-need > small { color: var(--xy-muted); } .ap-card { background: #fff; border: 1px solid var(--xy-line); border-radius: 22px; padding: 1.6rem 1.8rem; } .ap-step-h { display: flex; gap: .9rem; align-items: center; padding-bottom: 1rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--xy-line); } .ap-step-h .ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: #FDECEB; color: var(--xy-primary); font-size: 1.3rem; display: inline-flex; align-items: center; justify-content: center; } .ap-step-h h2 { font-size: 1.15rem; font-weight: 800; margin: 0; } .ap-step-h p { margin: .1rem 0 0; color: var(--xy-muted); font-size: .86rem; } .ap-actions { display: flex; justify-content: space-between; margin-top: 1rem; gap: .6rem; } .ap-next { border-radius: 999px; padding: .6rem 1.5rem; font-weight: 700; } .ap-cats { display: flex; flex-wrap: wrap; gap: .5rem; } .ap-cat input { position: absolute; opacity: 0; pointer-events: none; } .ap-cat span { display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid var(--xy-line); border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .9rem; cursor: pointer; transition: .15s; } .ap-cat span:hover { border-color: var(--xy-ink); } .ap-cat input:checked + span { background: var(--xy-ink); border-color: var(--xy-ink); color: #fff; } .ap-cat input:focus-visible + span { outline: 2px solid var(--xy-primary); outline-offset: 2px; } .ap-hours-tools { margin-bottom: .8rem; } .ap-chip { border: 1px solid var(--xy-line-strong, #cfd2d8); background: #fff; border-radius: 999px; padding: .35rem .9rem; font-size: .82rem; font-weight: 600; } .ap-chip:hover { border-color: var(--xy-ink); } .ap-hours { display: flex; flex-direction: column; gap: .45rem; } .ap-hour-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: .8rem; border: 1px solid var(--xy-line); border-radius: 12px; padding: .5rem .8rem; } .ap-hour-row .d { font-weight: 700; font-size: .9rem; } .ap-hour-row .t { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ap-hour-row .t input { width: auto; min-width: 100px; } .ap-hour-row .t .bi { color: var(--xy-faint); } .ap-closed { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; cursor: pointer; margin: 0; } .ap-hour-row.off { background: var(--xy-chip); } .ap-hour-row.off .t { opacity: .4; pointer-events: none; } .ap-uploads { display: flex; flex-direction: column; gap: .7rem; } .ap-up { position: relative; display: flex; align-items: center; gap: .9rem; border: 1.5px dashed var(--xy-line-strong, #cfd2d8); border-radius: 16px; padding: .9rem 1rem; cursor: pointer; transition: .15s; margin: 0; } .ap-up:hover { border-color: var(--xy-ink); background: #FAFAF8; } .ap-up .ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; } .ap-up .txt { flex: 1; min-width: 0; } .ap-up .txt strong { display: block; font-size: .92rem; } .ap-up .txt em { color: var(--xy-primary); font-style: normal; } .ap-up .txt small { display: block; color: var(--xy-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-up input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .ap-up.has-file { border-style: solid; border-color: var(--xy-green); background: var(--xy-green-soft); } .ap-up.has-file .ico { background: var(--xy-green); color: #fff; } .ap-up.is-invalid { border-color: #D5242B; } .ap-note { display: flex; gap: .6rem; align-items: center; background: var(--xy-chip); border-radius: 12px; padding: .7rem .9rem; font-size: .84rem; color: var(--xy-muted); margin-top: .5rem; } .ap-note .bi { font-size: 1.1rem; color: var(--xy-ink); } .ap-faq-wrap { max-width: 820px; margin-inline: auto; } .ap-faq .accordion-item { border: 1px solid var(--xy-line); border-radius: 14px !important; margin-bottom: .6rem; overflow: hidden; } .ap-faq .accordion-button { font-weight: 700; box-shadow: none; background: #fff; } .ap-faq .accordion-button:not(.collapsed) { background: var(--xy-chip); color: var(--xy-ink); } @media (max-width: 991.98px) { .ap-hero { grid-template-columns: 1fr; padding: 2rem 1.4rem; } .ap-hero-art { min-height: 0; padding-top: 1rem; } .ap-float { display: none; } .ap-grid { grid-template-columns: 1fr; } .ap-side { position: static; } .ap-steps { flex-direction: row; overflow-x: auto; } .ap-steps .s { flex: 0 0 auto; } .ap-steps small, .ap-need { display: none; } .ap-card { padding: 1.2rem; } .ap-hour-row { grid-template-columns: 1fr auto; } .ap-hour-row .t { grid-column: 1 / -1; order: 3; } } .ap-actions #nextStep, .ap-actions #submitApply { margin-left: auto; } /* Zero-commission emphasis */ .ap-zero-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--xy-green); color: #fff; border-radius: 999px; padding: .3rem .85rem; font-size: .8rem; font-weight: 800; margin-left: .35rem; } .ap-zero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; align-items: center; padding: 2.2rem 2.4rem; border-radius: 26px; margin-bottom: 3.4rem; color: #fff; background: radial-gradient(520px 260px at 0% 0%, rgba(25, 179, 110, .35), transparent 65%), linear-gradient(120deg, #0F3D2A, #14543A); position: relative; overflow: hidden; } .ap-zero-tag { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: .28rem .8rem; font-size: .78rem; font-weight: 700; color: #FFE08A; } .ap-zero-big { display: flex; align-items: center; gap: 1rem; margin: .8rem 0; } .ap-zero-big strong { font-size: clamp(4rem, 8vw, 6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; } .ap-zero-big span { font-size: 1.3rem; font-weight: 700; line-height: 1.2; color: #D8F5E6; } .ap-zero-main p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 460px; } .ap-zero-main p strong { color: #fff; } .ap-zero-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .ap-zero-list li { display: flex; align-items: center; gap: .9rem; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: .85rem 1rem; } .ap-zero-list .ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; } .ap-zero-list strong { display: block; } .ap-zero-list small { color: rgba(255, 255, 255, .72); } .ap-side-zero { display: flex; align-items: center; gap: .7rem; background: linear-gradient(120deg, #E7F6EC, #F3FBF6); border-color: #BFE3CC; } .ap-side-zero > .bi { font-size: 1.5rem; color: var(--xy-green); } .ap-side-zero strong { display: block; color: var(--xy-green-ink); } .ap-side-zero small { color: var(--xy-muted); } .ap-zero-strip { display: flex; align-items: center; gap: .6rem; background: #E7F6EC; color: var(--xy-green-ink); border-radius: 12px; padding: .65rem .9rem; font-size: .88rem; margin-bottom: 1.2rem; } .ap-zero-strip > .bi { font-size: 1.15rem; color: var(--xy-green); } .ap-zero-box { border: 1.5px solid #BFE3CC; background: linear-gradient(120deg, #F3FBF6, #fff); border-radius: 16px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; } .ap-zero-box-h { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; } .ap-zero-box-h > .bi { font-size: 1.7rem; color: var(--xy-green); } .ap-zero-box-h strong { display: block; font-size: 1.1rem; color: var(--xy-green-ink); } .ap-zero-box-h small { color: var(--xy-muted); } .ap-zero-box ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; } .ap-zero-box li { padding: .2rem 0; } .ap-zero-box li .bi { color: var(--xy-green); margin-right: .4rem; } @media (max-width: 991.98px) { .ap-zero { grid-template-columns: 1fr; padding: 1.6rem 1.3rem; } } /* Apply: membership plans */ .ap-sub-h { display: flex; align-items: center; gap: .5rem; font-weight: 800; margin: 1.4rem 0 .3rem; padding-top: 1.2rem; border-top: 1px solid var(--xy-line); } .ap-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin: 1rem 0; } .ap-plan { position: relative; display: block; cursor: pointer; margin: 0; } .ap-plan input { position: absolute; opacity: 0; pointer-events: none; } .ap-plan-card { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.3rem 1.1rem 1.1rem; border: 1.5px solid var(--xy-line); border-radius: 20px; background: #fff; transition: .18s; position: relative; } .ap-plan:hover .ap-plan-card { border-color: var(--xy-ink); transform: translateY(-2px); } .ap-plan input:checked + .ap-plan-card { border-color: var(--xy-ink); box-shadow: 0 0 0 2px var(--xy-ink), 0 22px 36px -26px rgba(22, 24, 29, .6); background: #FCFCFA; } .ap-plan input:focus-visible + .ap-plan-card { outline: 2px solid var(--xy-primary); outline-offset: 3px; } .ap-plan.is-featured .ap-plan-card { border-color: #E7A21A; } .ap-plan-badge { position: absolute; top: -11px; left: 1rem; background: var(--xy-primary); color: #fff; font-size: .7rem; font-weight: 800; padding: .2rem .65rem; border-radius: 999px; } .ap-plan.is-featured .ap-plan-badge { background: #E7A21A; } .ap-plan-name { font-weight: 800; font-size: 1.05rem; } .ap-plan-price strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; } .ap-plan-price small { color: var(--xy-muted); margin-left: .2rem; } .ap-plan-total { font-size: .8rem; color: var(--xy-muted); } .ap-plan-total del { color: var(--xy-faint); margin-left: .3rem; } .ap-plan-save { align-self: flex-start; background: var(--xy-green-soft); color: var(--xy-green-ink); font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .1rem .55rem; } .ap-plan-zero { align-self: flex-start; font-size: .74rem; font-weight: 700; color: var(--xy-green-ink); } .ap-plan-zero .bi { color: var(--xy-green); } .ap-plan-feats { list-style: none; margin: .5rem 0; padding: .6rem 0 0; border-top: 1px dashed var(--xy-line); font-size: .82rem; display: grid; gap: .3rem; flex: 1; } .ap-plan-feats .bi { color: var(--xy-green); margin-right: .25rem; } .ap-plan-pick { display: flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 999px; padding: .5rem; font-weight: 700; font-size: .85rem; background: var(--xy-chip); } .ap-plan-pick .bi-check-circle-fill, .ap-plan-pick em.on { display: none; } .ap-plan-pick em { font-style: normal; } .ap-plan input:checked + .ap-plan-card .ap-plan-pick { background: var(--xy-ink); color: #fff; } .ap-plan input:checked + .ap-plan-card .ap-plan-pick .bi-circle, .ap-plan input:checked + .ap-plan-card .ap-plan-pick em:not(.on) { display: none; } .ap-plan input:checked + .ap-plan-card .ap-plan-pick .bi-check-circle-fill, .ap-plan input:checked + .ap-plan-card .ap-plan-pick em.on { display: inline; } /* Closed business: listing + page */ .bc.is-closed { background: #F4F4F2; border-color: #E6E6E2; } .bc.is-closed .bc-title h3 { color: var(--xy-muted); } .bc.is-closed .bc-rate { background: #9AA0A8 !important; color: #fff; } .bc.is-closed .bc-promo { filter: grayscale(1); opacity: .7; } .bc.is-closed .bc-eta, .bc.is-closed .cb-eta { background: #E9E9E6; } .bc.is-closed .cb-eta b { color: var(--xy-muted); } .bc.is-closed .bc-ribbon { background: #8A8F98; } .bc-state { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; background: #E9E9E6; color: #5D626B; border-radius: 999px; padding: .12rem .6rem; font-size: .72rem; font-weight: 700; } .closed-banner { display: flex; align-items: center; gap: .9rem; background: #F1F1EE; border: 1px solid #E0E0DB; border-radius: 14px; padding: .8rem 1rem; margin-bottom: 1rem; color: #4B4F57; } .closed-banner > .bi { font-size: 1.4rem; color: #6B7280; } .closed-banner strong { display: block; } .closed-banner span { font-size: .86rem; } .pcard.is-closed { filter: grayscale(1); opacity: .6; cursor: not-allowed; background: #F6F6F4; } .pcard.is-closed:hover { border-color: var(--xy-line); box-shadow: none; transform: none; } .pcard-closed { font-size: .76rem; font-weight: 700; color: #6B7280; background: #E9E9E6; border-radius: 999px; padding: .2rem .7rem; display: inline-flex; align-items: center; gap: .3rem; } .closed-modal { border: 0; border-radius: 22px; } .cm-head { text-align: center; padding: 1rem .5rem .6rem; } .cm-ico { width: 60px; height: 60px; border-radius: 50%; background: #ECECE8; color: #5D626B; font-size: 1.6rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .6rem; } .cm-head h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .25rem; } .cm-head p { margin: 0; color: var(--xy-muted); } .cm-title { font-weight: 800; font-size: .95rem; margin: 1rem 0 .5rem; } .cm-list { display: flex; flex-direction: column; gap: .5rem; } .cm-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--xy-line); border-radius: 14px; text-decoration: none; color: var(--xy-ink); transition: .15s; } .cm-item:hover { border-color: var(--xy-ink); color: var(--xy-ink); background: #FAFAF8; } .cm-logo { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: var(--xy-ink); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cm-logo img { width: 100%; height: 100%; object-fit: cover; } .cm-info { flex: 1; min-width: 0; } .cm-info strong { display: block; font-size: .92rem; } .cm-info small { color: var(--xy-muted); font-size: .76rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-rate { background: var(--xy-green); color: #fff; font-size: .74rem; font-weight: 800; border-radius: 6px; padding: .1rem .4rem; } .cm-foot { display: flex; gap: .5rem; justify-content: center; margin-top: 1.1rem; flex-wrap: wrap; } /* Order live tracking */ .track-cta { width: 100%; display: flex; align-items: center; gap: .9rem; text-align: left; border: 0; border-radius: 16px; padding: .9rem 1.1rem; margin-bottom: 1rem; color: #fff; background: linear-gradient(120deg, #16181D, #2B2F37); box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .7); } .track-cta:hover { background: linear-gradient(120deg, #000, #23262D); } .track-ico { position: relative; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; background: var(--xy-primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .track-pulse { position: absolute; inset: -4px; border-radius: 16px; border: 2px solid var(--xy-primary); animation: trkpulse 1.8s ease-out infinite; } @keyframes trkpulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } .track-txt { flex: 1; } .track-txt strong { display: block; font-size: 1.05rem; } .track-txt small { color: rgba(255, 255, 255, .7); } .track-modal { border: 0; border-radius: 20px; overflow: hidden; } .track-sub { margin-top: .15rem; } .track-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--xy-line); } .track-stats > div { padding: .7rem 1rem; border-left: 1px solid var(--xy-line); } .track-stats > div:first-child { border-left: 0; } .track-stats small { display: block; color: var(--xy-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } .track-stats strong { font-size: .98rem; } #trackMap { height: 420px; background: #E8EAE6; } .track-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; padding: .7rem 1rem; font-size: .82rem; color: var(--xy-muted); } .lg { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 800; font-size: .72rem; margin-right: .3rem; vertical-align: middle; } .lg-a { background: #16181D; } .lg-b { background: #1E8E4E; } .lg-c { background: var(--xy-primary); } .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #19B36E; margin-right: .3rem; animation: trkpulse 1.6s ease-out infinite; } .trk-pin { background: none; border: 0; } .trk-pin { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 48px; } .trk-pin::before { content: ""; position: absolute; top: 0; left: 2px; width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .55); } .trk-pin b, .trk-pin i { position: relative; z-index: 1; color: #fff; } .trk-pin b { font-size: .8rem; line-height: 1; margin-top: 6px; } .trk-pin i { font-size: .8rem; line-height: 1; } .pin-a::before { background: #16181D; } .pin-b::before { background: #1E8E4E; } .pin-c::before { background: var(--xy-primary); } .pin-c i { font-size: 1.1rem; margin-top: 8px; } .pin-c .ring { position: absolute; top: 0; left: 2px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--xy-primary); animation: trkpulse 1.8s ease-out infinite; } @media (max-width: 575.98px) { .track-stats { grid-template-columns: repeat(2, 1fr); } .track-stats > div:nth-child(3) { border-left: 0; } #trackMap { height: 340px; } } /* Courier: collect payment reminder */ .collect-box { display: flex; align-items: center; gap: .8rem; margin: .7rem 0; padding: .8rem 1rem; border-radius: 14px; background: #FFF4D6; border: 1px solid #F0D48A; color: #5C3B00; } .collect-box > .bi { font-size: 1.6rem; color: #D98E0B; } .collect-box strong { display: block; font-size: 1.05rem; } .collect-box span { font-size: .85rem; } .collect-pop .amt { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; color: #1E8E4E; margin: .2rem 0 .4rem; } /* Customer account area */ .ac-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: .8rem; } .ac-user { background: #fff; border: 1px solid var(--xy-line); border-radius: 20px; padding: 1.2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; } .ac-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #16181D, #3B3F48); color: #fff; font-size: 1.6rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .5rem; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .6); } .ac-avatar.lg { width: 84px; height: 84px; font-size: 2.1rem; margin: 0; flex: 0 0 84px; } .ac-user-info strong { display: block; font-size: 1.02rem; } .ac-user-info small { color: var(--xy-muted); word-break: break-all; } .ac-verified, .ac-unverified { margin-top: .6rem; font-size: .76rem; font-weight: 700; border-radius: 999px; padding: .2rem .7rem; text-decoration: none; } .ac-verified { background: var(--xy-green-soft); color: var(--xy-green-ink); } .ac-unverified { background: #FFF1D6; color: #7A5A1F; } .ac-menu { background: #fff; border: 1px solid var(--xy-line); border-radius: 20px; padding: .4rem; display: flex; flex-direction: column; gap: .15rem; } .ac-menu a { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 13px; color: var(--xy-ink); text-decoration: none; font-weight: 600; font-size: .92rem; } .ac-menu a > i { width: 30px; height: 30px; border-radius: 9px; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; } .ac-menu a > span { flex: 1; } .ac-menu a:hover { background: var(--xy-chip); color: var(--xy-ink); } .ac-menu a.active { background: var(--xy-ink); color: #fff; } .ac-menu a.active > i { background: rgba(255, 255, 255, .16); } .ac-menu em { font-style: normal; font-size: .72rem; font-weight: 700; background: var(--xy-chip); color: var(--xy-muted); border-radius: 999px; padding: .05rem .55rem; } .ac-menu a.active em { background: rgba(255, 255, 255, .2); color: #fff; } .ac-menu em.live { background: var(--xy-primary); color: #fff; } .ac-logout button { width: 100%; border: 1px solid var(--xy-line); background: #fff; border-radius: 14px; padding: .6rem; font-weight: 600; font-size: .88rem; color: var(--xy-muted); } .ac-logout button:hover { color: #C8452B; border-color: #F0B8AC; } .ac-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .ac-head h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin: 0; } .ac-head p { margin: .2rem 0 0; color: var(--xy-muted); } .ac-back { display: inline-block; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--xy-muted); margin-bottom: .3rem; } .ac-back:hover { color: var(--xy-ink); } .ac-card { background: #fff; border: 1px solid var(--xy-line); border-radius: 20px; padding: 1.3rem 1.4rem; } .ac-card-h { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--xy-line); } .ac-card-h .ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; } .ac-card-h .c-blue { background: var(--xy-blue-soft); color: var(--xy-blue); } .ac-card-h .c-red { background: #FDECEB; color: #D5242B; } .ac-card-h h3 { font-size: 1.02rem; font-weight: 800; margin: 0; } .ac-card-h p { margin: 0; color: var(--xy-muted); font-size: .8rem; } .ac-sec { font-size: .98rem; font-weight: 800; margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; } .ac-sec .bi { color: var(--xy-primary); } .ac-hero { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 1.3rem 1.5rem; border-radius: 22px; margin-bottom: 1rem; color: #fff; background: radial-gradient(500px 220px at 100% 0%, rgba(217, 56, 30, .4), transparent 60%), linear-gradient(120deg, #16181D, #262A31); } .ac-hero .ac-avatar.lg { background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .25); } .ac-hero-info { flex: 1 1 200px; } .ac-hero-info h2 { font-size: 1.3rem; font-weight: 800; margin: 0; } .ac-hero-info span { display: block; color: rgba(255, 255, 255, .8); } .ac-hero-info small { color: rgba(255, 255, 255, .55); } .ac-tiles { display: grid; grid-template-columns: repeat(4, auto); gap: 1.4rem; } .ac-tiles strong { display: block; font-size: 1.15rem; font-weight: 800; } .ac-tiles small { color: rgba(255, 255, 255, .6); font-size: .74rem; } .ac-phone { display: flex; align-items: center; gap: .6rem; background: var(--xy-chip); border-radius: 12px; padding: .65rem .9rem; } .ac-phone > i { color: var(--xy-muted); } .ac-phone span { flex: 1; font-weight: 600; } .ac-phone .ok { font-style: normal; color: var(--xy-green-ink); font-size: .8rem; font-weight: 700; } .ac-phone .warn { color: #B7791F; font-size: .8rem; font-weight: 700; text-decoration: none; } .ac-pw { position: relative; } .ac-eye { position: absolute; right: .6rem; top: 2.1rem; border: 0; background: none; color: var(--xy-muted); padding: .3rem; } .ac-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: -.4rem 0 .3rem; } .ac-meter span { height: 5px; border-radius: 999px; background: var(--xy-chip); } .ac-meter[data-s="1"] span:nth-child(-n+1) { background: #D5242B; } .ac-meter[data-s="2"] span:nth-child(-n+2) { background: #E7A21A; } .ac-meter[data-s="3"] span:nth-child(-n+3) { background: #7CC47C; } .ac-meter[data-s="4"] span { background: #1E8E4E; } .ac-meter-txt { font-size: .76rem; color: var(--xy-muted); margin-bottom: 1rem; } .ac-actions { margin-top: 1rem; display: flex; justify-content: flex-end; } .ac-actions .btn { border-radius: 999px; padding-inline: 1.6rem; } .ac-empty { text-align: center; background: #fff; border: 1px dashed var(--xy-line-strong, #cfd2d8); border-radius: 22px; padding: 2.8rem 1.4rem; } .ac-empty .ico { width: 68px; height: 68px; border-radius: 50%; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--xy-muted); margin-bottom: .8rem; } .ac-empty h2 { font-size: 1.15rem; font-weight: 800; } .ac-empty p { color: var(--xy-muted); max-width: 420px; margin: .3rem auto 1rem; } .ac-tabs { display: flex; gap: .4rem; overflow-x: auto; margin-bottom: 1rem; } .ac-tabs button { border: 1px solid var(--xy-line); background: #fff; border-radius: 999px; padding: .4rem 1rem; font-weight: 600; font-size: .86rem; white-space: nowrap; } .ac-tabs button.active { background: var(--xy-ink); border-color: var(--xy-ink); color: #fff; } .ac-order { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--xy-line); border-radius: 18px; padding: .9rem 1.1rem; margin-bottom: .6rem; text-decoration: none; color: var(--xy-ink); transition: .15s; } .ac-order:hover { border-color: var(--xy-ink); color: var(--xy-ink); transform: translateY(-1px); box-shadow: 0 14px 26px -22px rgba(22, 24, 29, .6); } .ac-order.g-active { border-color: #F3C4BC; background: linear-gradient(120deg, #FFF8F6, #fff); } .ac-order-logo { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 14px; background: var(--xy-ink); color: #fff; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ac-order-logo img { width: 100%; height: 100%; object-fit: cover; } .ac-order-main { flex: 1; min-width: 0; } .ac-order-main strong { display: block; } .ac-order-main small { color: var(--xy-muted); } .ac-order-items { display: block; color: var(--xy-muted); font-size: .8rem; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-order-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; } .ac-order-side b { font-size: 1.05rem; } .ac-order-side em { font-style: normal; font-size: .76rem; font-weight: 700; color: var(--xy-muted); } .ac-order.g-active .ac-order-side em { color: var(--xy-primary); } .ac-addr { background: #fff; border: 1px solid var(--xy-line); border-radius: 20px; padding: 1.1rem 1.2rem; height: 100%; display: flex; flex-direction: column; gap: .6rem; } .ac-addr.is-default { border-color: #BFE3CC; box-shadow: inset 0 0 0 1px #BFE3CC; } .ac-addr header { display: flex; align-items: center; gap: .7rem; } .ac-addr header .ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; } .ac-addr header strong { display: block; } .ac-addr header small { color: var(--xy-muted); } .ac-addr p { margin: 0; font-size: .9rem; color: #3b3f48; } .ac-def { margin-left: auto; background: var(--xy-green-soft); color: var(--xy-green-ink); font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; } .ac-geo { display: flex; gap: .9rem; align-items: center; background: #F6F6F3; border-radius: 14px; padding: .7rem; } .ac-geo img { background: #fff; border-radius: 10px; } .ac-geo strong { display: block; margin-bottom: .2rem; font-size: .88rem; } .ac-geo strong .bi { color: var(--xy-primary); } .ac-geo a { display: block; font-size: .82rem; text-decoration: none; } .ac-warn { background: #FFF4E0; color: #7A5A1F; border-radius: 12px; padding: .6rem .8rem; font-size: .82rem; } .ac-addr footer { display: flex; gap: .5rem; margin-top: auto; } .ac-steps4 { list-style: none; margin: 0 0 1.2rem; padding: 1.2rem 1rem; background: #fff; border: 1px solid var(--xy-line); border-radius: 20px; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; } .ac-steps4::before { content: ""; position: absolute; left: 10%; right: 10%; top: 2.05rem; height: 4px; background: var(--xy-chip); border-radius: 4px; } .ac-steps4::after { content: ""; position: absolute; left: 10%; top: 2.05rem; height: 4px; width: calc(80% * var(--p-n, 0)); background: var(--xy-green); border-radius: 4px; } .ac-steps4 { --p-n: 0; } .ac-steps4 li { position: relative; z-index: 1; text-align: center; } .ac-steps4 li span { width: 44px; height: 44px; border-radius: 50%; background: var(--xy-chip); color: var(--xy-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; border: 4px solid #fff; } .ac-steps4 li small { display: block; margin-top: .4rem; font-size: .78rem; font-weight: 600; color: var(--xy-muted); } .ac-steps4 li.done span { background: var(--xy-green); color: #fff; } .ac-steps4 li.now span { background: var(--xy-primary); color: #fff; box-shadow: 0 0 0 5px rgba(217, 56, 30, .18); } .ac-steps4 li.now small, .ac-steps4 li.done small { color: var(--xy-ink); } .ac-cancelled { display: flex; gap: .8rem; align-items: center; background: #FDECEB; border: 1px solid #F3C4BC; color: #8A2418; border-radius: 16px; padding: .9rem 1.1rem; margin-bottom: 1rem; } .ac-cancelled > .bi { font-size: 1.5rem; } .ac-cancelled strong, .ac-cancelled span { display: block; } @media (max-width: 991.98px) { .ac-side { position: static; } .ac-tiles { grid-template-columns: repeat(2, auto); } .ac-menu { flex-direction: row; overflow-x: auto; } .ac-menu a { white-space: nowrap; } .ac-user { flex-direction: row; text-align: left; gap: .8rem; flex-wrap: wrap; } .ac-avatar { margin: 0; } .ac-verified, .ac-unverified { margin: 0 0 0 auto; } } @media (max-width: 575.98px) { .ac-order { flex-wrap: wrap; } .ac-order-side { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; } } .ac-steps4 li small { padding: 0 .15rem; line-height: 1.2; } .ac-stepnote { display: flex; gap: .6rem; align-items: flex-start; margin: -.6rem 0 1rem; padding: .7rem 1rem; border-radius: 14px; background: #FFF4D6; border: 1px solid #F0D48A; color: #5C3B00; font-size: .86rem; } .ac-stepnote .bi { margin-top: .1rem; color: #D98E0B; } .track-cta.is-wait { background: #EDEDEA; color: #6B7280; box-shadow: none; cursor: not-allowed; } .track-cta.is-wait .track-ico { background: #C9CCD1; color: #fff; } .track-cta.is-wait .track-txt small { color: #7C818A; } @media (max-width: 575.98px) { .ac-steps4 li small { font-size: .68rem; } .ac-steps4 li span { width: 36px; height: 36px; font-size: 1rem; } .ac-steps4::before, .ac-steps4::after { top: 1.9rem; } } /* Address cards & modal */ .ac-pin { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: .25rem .7rem; align-self: flex-start; } .ac-pin.ok { background: var(--xy-green-soft); color: var(--xy-green-ink); } .ac-pin.warn { background: #FFF4E0; color: #7A5A1F; } .ac-modal { border: 0; border-radius: 22px; } #pickMap { height: 320px; border-radius: 14px; overflow: hidden; } /* Account extras: heart, coupons, reminders, sessions, privacy */ .bc-wrap { position: relative; height: 100%; } .bc-heart { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--xy-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); transition: .15s; } .bc-heart:hover { transform: scale(1.1); } .bc-heart.on { color: var(--xy-primary); } .ac-link { border: 0; background: none; color: var(--xy-primary); font-weight: 700; font-size: .82rem; padding: 0; } .ac-remind { display: flex; gap: .8rem; align-items: center; background: #FFF4D6; border: 1px solid #F0D48A; color: #5C3B00; border-radius: 16px; padding: .8rem 1rem; margin-bottom: 1rem; } .ac-remind > .bi { font-size: 1.5rem; color: #D98E0B; } .ac-remind strong, .ac-remind span { display: block; } .ac-remind span { font-size: .84rem; } .ac-order-wrap { margin-bottom: .6rem; } .ac-order-wrap .ac-order { margin-bottom: 0; } .ac-order-acts { display: flex; gap: .5rem; flex-wrap: wrap; padding: .5rem .4rem 0 .4rem; } .ac-chip-btn { border: 1px solid var(--xy-line); background: #fff; border-radius: 999px; padding: .3rem .85rem; font-size: .8rem; font-weight: 700; color: var(--xy-ink); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .ac-chip-btn:hover { border-color: var(--xy-ink); color: var(--xy-ink); } .ac-chip-btn.star { background: #FFF4D6; border-color: #F0D48A; color: #7A5A1F; } .ac-coupon { display: flex; background: #fff; border: 1px solid var(--xy-line); border-radius: 18px; overflow: hidden; height: 100%; } .ac-coupon-amt { flex: 0 0 104px; background: linear-gradient(160deg, #1E8E4E, #14683A); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .8rem; text-align: center; position: relative; } .ac-coupon-amt strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .ac-coupon-amt small { opacity: .8; } .ac-coupon-amt::after { content: ""; position: absolute; right: -7px; top: 0; bottom: 0; width: 14px; background: radial-gradient(circle at 7px 50%, transparent 5px, #fff 5.5px) 0 0 / 14px 22px repeat-y; } .ac-coupon-body { padding: .9rem 1rem; flex: 1; } .ac-coupon-body h3 { font-size: .98rem; font-weight: 800; margin: 0 0 .3rem; } .ac-coupon-body p { margin: 0; font-size: .8rem; color: var(--xy-muted); } .ac-coupon-body .exp { color: #B7791F; } .ac-coupon-act { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; } .ac-code { border: 1.5px dashed #9AD3B1; background: #F3FBF6; color: var(--xy-green-ink); border-radius: 10px; padding: .25rem .7rem; font-size: .82rem; } .ac-code b { letter-spacing: .04em; } .ac-coupon.is-used { opacity: .6; filter: grayscale(.8); } .ac-used { font-size: .8rem; font-weight: 600; color: var(--xy-muted); } .ac-switch { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--xy-line); cursor: pointer; margin: 0; } .ac-switch strong { display: block; font-size: .92rem; } .ac-switch small { color: var(--xy-muted); } .ac-switch .form-check-input { width: 2.6em; height: 1.4em; flex: 0 0 auto; } .ac-sess { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--xy-line); } .ac-sess .ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; } .ac-sess.current .ico { background: var(--xy-green-soft); color: var(--xy-green); } .ac-sess strong { display: block; font-size: .92rem; } .ac-sess small { color: var(--xy-muted); } .ac-sess em { font-style: normal; font-size: .7rem; font-weight: 700; background: var(--xy-green-soft); color: var(--xy-green-ink); border-radius: 999px; padding: .05rem .5rem; margin-left: .3rem; } .ac-privacy, .ac-danger { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 0; } .ac-privacy { border-bottom: 1px solid var(--xy-line); } .ac-privacy strong, .ac-danger strong { display: block; } .ac-privacy small, .ac-danger small { color: var(--xy-muted); display: block; max-width: 520px; } .ac-danger strong { color: #B3261E; } .ac-delform { background: #FDF3F2; border: 1px solid #F3C4BC; border-radius: 14px; padding: 1rem; margin-top: .4rem; } /* Business delivery zones editor */ .dz-info { display: flex; gap: .6rem; background: var(--xy-chip); border-radius: 14px; padding: .8rem 1rem; font-size: .88rem; color: #3b3f48; margin-bottom: 1rem; } .dz-info .bi { margin-top: .15rem; } .dz-wrap { display: grid; grid-template-columns: 360px 1fr; gap: 1rem; align-items: start; } .dz-side { max-height: calc(100vh - 170px); overflow-y: auto; padding-right: .2rem; } .dz-mapbox { position: relative; position: sticky; top: 80px; } #dzMap { height: calc(100vh - 190px); min-height: 440px; border-radius: 18px; border: 1px solid var(--xy-line); z-index: 1; } .dz-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 500; background: #16181D; color: #fff; border-radius: 999px; padding: .4rem 1rem; font-size: .82rem; display: none; } .dz-card { background: #fff; border: 1px solid var(--xy-line); border-radius: 16px; margin-bottom: .6rem; overflow: hidden; } .dz-card.open { border-color: var(--xy-ink); } .dz-card.off { opacity: .7; } .dz-card header { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; cursor: pointer; } .dz-card header small { color: var(--xy-muted); font-size: .76rem; } .dz-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .25rem; flex: 0 0 12px; } .dz-body { padding: .2rem .9rem 1rem; border-top: 1px solid var(--xy-line); } .dz-body label { font-size: .76rem; font-weight: 600; color: var(--xy-muted); margin: .5rem 0 .2rem; display: block; } .dz-colors { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .1rem; } .dz-c { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--xy-line); padding: 0; } .dz-c.on { box-shadow: 0 0 0 2px var(--xy-ink); } .dz-draw small { display: block; color: var(--xy-muted); margin-top: .3rem; font-size: .75rem; } .dz-note { background: var(--xy-green-soft); color: var(--xy-green-ink); border-radius: 10px; padding: .4rem .7rem; font-size: .8rem; } .dz-vertex { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #16181D; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); cursor: grab; } .dz-link { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--xy-line); border-radius: 14px; padding: .8rem 1rem; text-decoration: none; color: var(--xy-ink); margin-bottom: 1rem; } .dz-link:hover { border-color: var(--xy-ink); color: var(--xy-ink); } .dz-link .ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: #EFE9FB; color: #6B4CC2; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; } .dz-link span:nth-child(2) { flex: 1; } .dz-link strong, .dz-link small { display: block; } .dz-link small { color: var(--xy-muted); } @media (max-width: 991.98px) { .dz-wrap { grid-template-columns: 1fr; } .dz-side { max-height: none; } .dz-mapbox { position: static; order: -1; } #dzMap { height: 340px; min-height: 0; } } .cp-free { display: flex; gap: .6rem; align-items: center; margin: .8rem 1.25rem 0; background: #E7F6EC; color: var(--xy-green-ink); border-radius: 12px; padding: .55rem .8rem; font-size: .84rem; } .cp-free .bi { color: var(--xy-green); font-size: 1.1rem; } .dz-cellbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; } .dz-count { font-size: .82rem; color: var(--xy-muted); flex: 1 1 100%; } .dz-count b { color: var(--xy-ink); font-size: 1rem; } /* Mahalle seçimli teslimat bölgesi */ .dz-geo label { margin-top: .1rem; } .dz-loading { display: flex; align-items: center; gap: .5rem; background: var(--xy-chip); border-radius: 10px; padding: .55rem .7rem; font-size: .82rem; } .dz-loading small { color: var(--xy-muted); } .dz-areabar { display: flex; gap: .35rem; } .dz-arealist { max-height: 260px; overflow-y: auto; border: 1px solid var(--xy-line); border-radius: 12px; margin-top: .4rem; } .dz-arow { display: flex; align-items: center; gap: .55rem; padding: .4rem .7rem; margin: 0 !important; font-size: .84rem !important; font-weight: 500 !important; color: var(--xy-ink) !important; cursor: pointer; border-bottom: 1px solid var(--xy-line); } .dz-arow:last-child { border-bottom: 0; } .dz-arow:hover { background: var(--xy-chip); } .dz-arow span { flex: 1; } .dz-arow small { color: var(--xy-muted); font-size: .72rem; } .dz-areasum { font-size: .84rem; color: var(--xy-muted); } .dz-areasum b { color: var(--xy-ink); font-size: 1rem; } .dz-lbl { pointer-events: none; } .dz-lbl span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: 11px; font-weight: 700; color: #2B2F38; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; } .dz-lbl.on span { color: #111; } .dz-body .dz-arow { display: flex; } /* Yönetici: bölgeler */ .rg-card { background: #fff; border: 1px solid var(--xy-line); border-radius: 18px; overflow: hidden; } .rg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--xy-line); } .rg-crumbs { display: flex; align-items: center; gap: .4rem; font-size: .92rem; } .rg-crumbs a { color: var(--xy-muted); text-decoration: none; } .rg-crumbs a:hover { color: var(--xy-ink); } .rg-crumbs .bi { font-size: .7rem; color: var(--xy-muted); } .rg-tools { display: flex; gap: .4rem; align-items: center; } .rg-tools input { width: 190px; } .rg-row { display: flex; align-items: center; gap: .8rem; padding: .65rem 1rem; border-bottom: 1px solid var(--xy-line); } .rg-row:last-child { border-bottom: 0; } .rg-row:hover { background: var(--xy-chip); } .rg-name { flex: 1; } .rg-name.go { cursor: pointer; } .rg-name strong, .rg-name small { display: block; } .rg-name small { color: var(--xy-muted); font-size: .76rem; } .rg-open { font-size: .82rem; color: var(--xy-muted); text-decoration: none; } .rg-open:hover { color: var(--xy-ink); } .rg-empty { padding: 2rem; text-align: center; color: var(--xy-muted); } .rg-warn { color: #B4361C; font-weight: 600; } .rg-shape { font-size: .82rem; color: var(--xy-ink); text-decoration: none; border: 1px solid var(--xy-line); border-radius: 999px; padding: .2rem .7rem; } .rg-shape:hover { border-color: var(--xy-ink); } .rg-shape-map { flex: 1; min-width: 0; } #rgMap { height: min(70vh, 560px); } .rg-modal .modal-body { overflow: hidden; } .rg-shapebox { display: flex; } .rg-shape-side { width: 300px; flex: 0 0 300px; padding: 1rem; border-left: 1px solid var(--xy-line); overflow-y: auto; max-height: min(70vh, 560px); } @media (max-width: 767.98px) { .rg-shapebox { flex-direction: column; } .rg-shape-side { width: auto; flex: none; border-left: 0; border-top: 1px solid var(--xy-line); max-height: none; } #rgMap { height: 340px; } } .rg-miss { display: none; align-items: center; gap: .4rem; font-size: .84rem; margin: 0; white-space: nowrap; cursor: pointer; } .rg-miss input { width: 16px; height: 16px; } /* ---------- Hesap ayarları (yönetici işletme detayı + işletme hesabı) ---------- */ .acc-hero { display: flex; align-items: center; gap: 1rem; background: var(--xy-surface); border: 1px solid var(--xy-line-panel); border-radius: var(--xy-radius-card); padding: 1rem 1.25rem; margin-bottom: 1rem; } .acc-hero h2 { font-size: 1.25rem; margin: 0; } .acc-logo { width: 56px; height: 56px; border-radius: 14px; background: var(--xy-chip); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; color: var(--xy-muted); overflow: hidden; flex: 0 0 56px; } .acc-logo img { width: 100%; height: 100%; object-fit: cover; } .min-w-0 { min-width: 0; } .acc-tabs-wrap { background: var(--xy-surface); border: 1px solid var(--xy-line-panel); border-radius: var(--xy-radius-card); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: thin; } .acc-tabs { flex-wrap: nowrap; border: 0; padding: 0 .5rem; } .acc-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--xy-muted); font-weight: 700; font-size: .85rem; padding: .95rem .9rem .8rem; white-space: nowrap; display: flex; align-items: center; gap: .4rem; } .acc-tabs .nav-link:hover { color: var(--xy-ink); } .acc-tabs .nav-link.active { color: var(--xy-ink); border-bottom-color: var(--xy-ink); background: transparent; } .acc-dot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--xy-faint); } .acc-dot.is-red { background: var(--xy-primary); } .acc-dot.is-amber { background: #E7A21A; } .acc-dot.is-blue { background: var(--xy-blue); } .acc-card { background: var(--xy-surface); border: 1px solid var(--xy-line-panel); border-radius: var(--xy-radius-card); padding: 1.25rem; margin-bottom: 1rem; } .acc-card.acc-pend { border-color: #F1D79A; background: #FFFBF1; } .acc-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; } .acc-head h2 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; } .acc-head h2 i { color: var(--xy-muted); } .acc-note { font-size: .78rem; color: var(--xy-faint); } .acc-lbl { display: block; font-size: .75rem; font-weight: 700; color: var(--xy-muted); margin-bottom: .3rem; } .acc-miss { color: var(--xy-red-ink); font-weight: 800; margin-left: .3rem; } .form-control.is-warn { border-color: #E7A21A; background: #FFFCF4; } .form-control[readonly] { background: var(--xy-panel-bg); color: var(--xy-muted); } .acc-actions { margin-top: 1rem; display: flex; gap: .5rem; } .acc-alert { display: flex; gap: .65rem; align-items: flex-start; border-radius: 12px; padding: .75rem .9rem; font-size: .85rem; margin-bottom: 1rem; border: 1px solid; } .acc-alert.info { background: var(--xy-blue-soft); border-color: #BFCFF5; color: var(--xy-blue-ink); } .acc-alert.warn { background: var(--xy-amber-soft); border-color: #F1D79A; color: var(--xy-amber-ink); } .acc-alert i { margin-top: 2px; } .acc-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; background: var(--xy-chip); color: var(--xy-muted); white-space: nowrap; } .acc-chip.sm { font-size: .65rem; padding: .12rem .45rem; } .acc-chip.green { background: var(--xy-green-soft); color: var(--xy-green-ink); } .acc-chip.amber { background: var(--xy-amber-soft); color: var(--xy-amber-ink); } .acc-chip.red { background: var(--xy-red-soft); color: var(--xy-red-ink); } .acc-chip.blue { background: var(--xy-blue-soft); color: var(--xy-blue-ink); } .acc-chip.violet { background: #EFE9FD; color: #5B3BB5; } .acc-empty { text-align: center; color: var(--xy-faint); font-size: .85rem; padding: 1.25rem; } .acc-empty i { display: block; font-size: 1.5rem; margin-bottom: .3rem; } .acc-line { display: flex; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--xy-line); } .acc-line:last-child { border-bottom: 0; } .acc-swatch { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 12px; } .acc-dl { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem .75rem; font-size: .85rem; margin: 0; } .acc-dl dt { color: var(--xy-muted); font-weight: 600; } .acc-dl dd { margin: 0; } .acc-reason { background: var(--xy-red-soft); color: var(--xy-red-ink); border-radius: 10px; padding: .5rem .7rem; font-size: .82rem; margin-top: .5rem; } .acc-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--xy-muted); background: var(--xy-panel-bg); border-bottom: 0; } .acc-pills { display: inline-flex; gap: .3rem; background: var(--xy-chip); border-radius: 999px; padding: .2rem; } .acc-pills button { border: 0; background: transparent; font-weight: 700; font-size: .78rem; padding: .35rem .8rem; border-radius: 999px; color: var(--xy-muted); } .acc-pills button.on { background: var(--xy-ink); color: #fff; } /* Genel bakış */ .acc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1rem; } .acc-kpi { background: var(--xy-surface); border: 1px solid var(--xy-line-panel); border-radius: var(--xy-radius-card); padding: .9rem 1.1rem; } .acc-kpi span { display: block; font-size: .72rem; font-weight: 700; color: var(--xy-muted); text-transform: uppercase; letter-spacing: .04em; } .acc-kpi strong { font-size: 1.45rem; letter-spacing: -.02em; } .acc-kpi small { font-size: .8rem; color: var(--xy-muted); font-weight: 600; } .acc-progress { height: 6px; background: var(--xy-chip); border-radius: 3px; overflow: hidden; margin-bottom: .75rem; } .acc-progress span { display: block; height: 100%; background: var(--xy-green); border-radius: 3px; } .acc-check { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border-radius: 12px; text-decoration: none; color: var(--xy-ink); font-weight: 600; font-size: .9rem; } .acc-check:hover { background: var(--xy-panel-bg); color: var(--xy-ink); } .acc-check > i:first-child { font-size: 1.1rem; color: #E7A21A; } .acc-check.ok > i:first-child { color: var(--xy-green); } .acc-check em { font-style: normal; font-size: .75rem; color: var(--xy-amber-ink); background: var(--xy-amber-soft); border-radius: 999px; padding: .1rem .55rem; } /* Rehber */ .dir-row { display: grid; grid-template-columns: 110px 1.2fr 1.3fr 1fr 1.2fr 38px; gap: .4rem; margin-bottom: .5rem; } .dir-row .btn { min-height: 38px; padding: 0; } @media (max-width: 991.98px) { .dir-row { grid-template-columns: 1fr 1fr; } .dir-row .dir-del { grid-column: span 2; } } /* Belgeler */ .acc-doc { background: var(--xy-surface); border: 1px solid var(--xy-line-panel); border-radius: var(--xy-radius-card); padding: 1rem; height: 100%; border-top: 3px solid var(--xy-line-strong); } .acc-doc.st-approved { border-top-color: var(--xy-green); } .acc-doc.st-pending { border-top-color: #E7A21A; } .acc-doc.st-rejected { border-top-color: var(--xy-primary); } .acc-doc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .acc-doc-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--xy-chip); display: flex; align-items: center; justify-content: center; color: var(--xy-muted); } .acc-doc-file { font-size: .85rem; margin-bottom: .2rem; word-break: break-all; } .acc-doc-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; } .acc-upload { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--xy-line-strong); } .acc-upload .acc-exp { width: 150px; } .acc-hist { margin-top: .6rem; font-size: .8rem; color: var(--xy-muted); } .acc-hist summary { cursor: pointer; font-weight: 700; } /* Konum */ .acc-map { height: 380px; border-radius: 14px; border: 1px solid var(--xy-line-strong); overflow: hidden; z-index: 0; } .acc-mapbar { display: flex; gap: .4rem; margin-bottom: .6rem; flex-wrap: wrap; } .acc-mapbar .form-control { flex: 1; min-width: 160px; } .acc-coords { display: flex; justify-content: space-between; margin-top: .4rem; } .acc-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .acc-key.blue { background: #1F6FEB; } .acc-key.red { background: #D9381E; } .acc-pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); } .acc-pin.red { background: #D9381E; } .acc-pin.blue { background: #1F6FEB; } /* Tercihler / sözleşme / geçmiş */ .acc-pref { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--xy-line); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; } .acc-pref > span { min-width: 90px; } .acc-pref .form-check-input { width: 2.6rem; height: 1.4rem; cursor: pointer; } .acc-prose { white-space: pre-wrap; font-size: .92rem; line-height: 1.6; } .acc-tl { list-style: none; margin: 0; padding: 0 0 0 .4rem; border-left: 2px solid var(--xy-line); } .acc-tl li { position: relative; padding: 0 0 1rem 1.1rem; } .acc-tl-dot { position: absolute; left: -.42rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--xy-ink); border: 2px solid #fff; box-sizing: content-box; } .acc-code { background: #16181D; color: #E7E9EE; border-radius: 12px; padding: .9rem 1rem; font-size: .78rem; overflow-x: auto; margin: .5rem 0; } .acc-dl code { word-break: break-all; } .acc-opt { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--xy-line-strong); border-radius: 12px; padding: .7rem .9rem; margin-bottom: .5rem; cursor: pointer; } .acc-opt.on { border-color: var(--xy-ink); background: var(--xy-panel-bg); } .acc-opt small { display: block; color: var(--xy-muted); font-size: .78rem; } .acc-opt input { margin-top: .3rem; accent-color: var(--xy-primary); } .acc-extra { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--xy-line-strong); } @media (max-width: 767.98px) { .acc-extra { grid-template-columns: 1fr; } } .tr-steps { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: .85rem; font-weight: 700; color: var(--xy-faint); } .tr-steps span.on { color: var(--xy-ink); } .tr-steps b { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--xy-chip); align-items: center; justify-content: center; margin-right: .3rem; } .tr-steps span.on b { background: var(--xy-ink); color: #fff; } .tr-grp { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--xy-muted); font-weight: 800; margin: 1rem 0 .3rem; } .tr-doc { display: flex; gap: .7rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--xy-line); border-radius: 12px; margin-bottom: .4rem; font-size: .88rem; } .tr-doc > i { font-size: 1.2rem; color: var(--xy-faint); } .tr-doc.done > i { color: var(--xy-green); } .tr-doc.done { background: #F7FCF9; } #trContractForm form { background: var(--xy-panel-bg); border-radius: 12px; padding: .8rem; margin-bottom: .5rem; } .acc-feebox { background: var(--xy-panel-bg); border-radius: 12px; padding: .8rem .9rem; margin: -.1rem 0 .6rem; } .acc-area { display: flex; align-items: center; gap: .55rem; padding: .4rem .2rem; border-bottom: 1px solid var(--xy-line); font-size: .88rem; } .acc-area > i { color: var(--xy-faint); } .acc-area small { margin-left: auto; color: var(--xy-faint); } .acc-area em { font-style: normal; font-size: .7rem; color: var(--xy-red-ink); background: var(--xy-red-soft); border-radius: 999px; padding: .05rem .5rem; } .acc-area.off span { text-decoration: line-through; color: var(--xy-faint); } .acc-arlist { max-height: 340px; overflow-y: auto; border: 1px solid var(--xy-line); border-radius: 12px; } .acc-arrow { display: flex !important; align-items: center; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid var(--xy-line); cursor: pointer; margin: 0; } .acc-arrow small { margin-left: auto; color: var(--xy-faint); } .acc-pay { border: 1px solid var(--xy-line); border-radius: 14px; padding: .8rem .9rem; margin-bottom: .6rem; } .acc-pay.on { border-color: #B7E0CC; background: #F7FCF9; } .acc-pay.off { opacity: .65; } .acc-pay-head { display: flex; align-items: center; gap: .7rem; } .acc-pay-form { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--xy-line-strong); } .nav-badge { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 800; background: var(--xy-primary); color: #fff; border-radius: 999px; padding: .05rem .5rem; } .acc-pendimg { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; font-size: .78rem; color: var(--xy-amber-ink); } .acc-pendimg img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid #F1D79A; } .ap-card { background: var(--xy-surface); border: 1px solid var(--xy-line-panel); border-radius: var(--xy-radius-card); padding: 1rem 1.1rem; margin-bottom: .8rem; } .ap-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .ap-diff { width: 100%; font-size: .85rem; margin: .7rem 0; } .ap-diff th { width: 160px; color: var(--xy-muted); font-weight: 600; padding: .25rem 0; vertical-align: top; } .ap-diff del { color: var(--xy-red-ink); background: var(--xy-red-soft); padding: 0 .3rem; border-radius: 4px; text-decoration: line-through; } .ap-diff ins { color: var(--xy-green-ink); background: var(--xy-green-soft); padding: 0 .3rem; border-radius: 4px; text-decoration: none; } .ap-imgs { display: flex; gap: .6rem; flex-wrap: wrap; margin: .5rem 0; } .ap-imgs figure { margin: 0; } .ap-imgs img { height: 90px; max-width: 220px; object-fit: cover; border-radius: 10px; border: 1px solid var(--xy-line); } .ap-imgs figcaption { font-size: .7rem; color: var(--xy-muted); } .promo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; } .promo-tpl { text-align: left; background: var(--xy-surface); border: 1px solid var(--xy-line-panel); border-radius: var(--xy-radius-card); padding: 1rem; display: flex; flex-direction: column; gap: .35rem; cursor: pointer; transition: border-color .15s, transform .15s; } .promo-tpl:hover { border-color: var(--xy-primary); transform: translateY(-2px); } .promo-tpl small { color: var(--xy-muted); font-size: .8rem; } .promo-tpl em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--xy-primary); margin-top: auto; } .promo-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--xy-red-soft); color: var(--xy-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; } .promo-ic.sm { width: 34px; height: 34px; font-size: 1rem; flex: 0 0 34px; } .pr-days { display: flex; gap: .35rem; flex-wrap: wrap; } .pr-days label { margin: 0; cursor: pointer; } .pr-days input { display: none; } .pr-days span { display: inline-block; padding: .35rem .7rem; border-radius: 999px; background: var(--xy-chip); font-size: .8rem; font-weight: 700; color: var(--xy-muted); } .pr-days input:checked + span { background: var(--xy-ink); color: #fff; } .snd-list { display: grid; gap: .5rem; } .snd { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--xy-line-strong); border-radius: 12px; padding: .65rem .9rem; cursor: pointer; margin: 0; } .snd.on { border-color: var(--xy-ink); background: var(--xy-panel-bg); } .snd small { display: block; color: var(--xy-muted); font-size: .78rem; } .snd input { accent-color: var(--xy-primary); } .heat { font-size: .68rem; color: var(--xy-muted); } .heat-row { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 2px; margin-bottom: 2px; align-items: center; } .heat-c { display: block; height: 18px; border-radius: 3px; background: var(--xy-primary); } .heat-head span { text-align: left; } .rep-bar { display: grid; grid-template-columns: 80px 1fr 36px; gap: .6rem; align-items: center; font-size: .82rem; margin-bottom: .3rem; } .rep-bar div { height: 8px; background: var(--xy-chip); border-radius: 4px; overflow: hidden; } .rep-bar i { display: block; height: 100%; background: var(--xy-ink); } .rep-bar b { text-align: right; } .top-row { display: grid; grid-template-columns: 26px minmax(120px, 1.2fr) 2fr 70px 100px; gap: .7rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--xy-line); font-size: .88rem; } .top-n { width: 24px; height: 24px; border-radius: 50%; background: var(--xy-chip); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; } .top-row:nth-child(-n+4) .top-n { background: var(--xy-ink); color: #fff; } .top-bar { height: 8px; background: var(--xy-chip); border-radius: 4px; overflow: hidden; } .top-bar i { display: block; height: 100%; background: var(--xy-primary); } .top-q { text-align: right; color: var(--xy-muted); } .top-r { text-align: right; font-weight: 700; } @media (max-width: 767.98px) { .top-row { grid-template-columns: 26px 1fr 70px; } .top-bar, .top-r { display: none; } } .acc-pills a { border: 0; background: transparent; font-weight: 700; font-size: .78rem; padding: .35rem .8rem; border-radius: 999px; color: var(--xy-muted); text-decoration: none; display: inline-block; } .acc-pills a.on { background: var(--xy-ink); color: #fff; } .shift-table th.is-today, .shift-table td.is-today { background: #FFF8EC; } .shift-cell { min-width: 108px; } .shift-cell input { margin-bottom: 3px; padding: .15rem .35rem; min-height: 32px; font-size: .78rem; } .tag-grid { display: flex; flex-wrap: wrap; gap: .4rem; } .tag-chip { margin: 0; cursor: pointer; } .tag-chip input { display: none; } .tag-chip span { display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: var(--xy-chip); font-size: .8rem; font-weight: 700; color: var(--xy-muted); border: 1px solid transparent; } .tag-chip input:checked + span { background: var(--xy-amber-soft); color: var(--xy-amber-ink); border-color: #F1D79A; } .tag-chip.diet input:checked + span { background: var(--xy-green-soft); color: var(--xy-green-ink); border-color: #B7E0CC; } .menu-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: var(--xy-surface); border: 1px solid var(--xy-line); border-radius: 14px; padding: .6rem .8rem; margin-bottom: 1rem; } .menu-filter .lbl { font-size: .75rem; font-weight: 800; color: var(--xy-muted); text-transform: uppercase; letter-spacing: .04em; } .menu-filter .chip { border: 1px solid var(--xy-line-strong); background: #fff; border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; font-weight: 700; cursor: pointer; } .menu-filter .chip.on { background: var(--xy-ink); color: #fff; border-color: var(--xy-ink); } .menu-filter .chip.ex.on { background: var(--xy-red-soft); color: var(--xy-red-ink); border-color: #F0B7AB; } .pc-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin: .2rem 0; } .pc-tag { font-size: .66rem; font-weight: 800; padding: .08rem .45rem; border-radius: 999px; background: var(--xy-green-soft); color: var(--xy-green-ink); } .pc-al { font-size: .7rem; color: var(--xy-amber-ink); } .pcard.is-filtered { display: none; } .pm-allergen { background: var(--xy-amber-soft); color: var(--xy-amber-ink); border-radius: 10px; padding: .45rem .7rem; font-size: .8rem; margin: .5rem 0; } .eta-banner { display: flex; align-items: center; gap: .9rem; background: var(--xy-green-soft); border: 1px solid #B7E0CC; border-radius: 16px; padding: .8rem 1.1rem; margin-bottom: 1rem; color: var(--xy-green-ink); } .eta-banner > i { font-size: 1.6rem; } .eta-banner small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .eta-banner strong { font-size: 1.5rem; letter-spacing: -.02em; } .eta-banner span { margin-left: auto; font-weight: 700; font-size: .85rem; } .eta-banner.late { background: var(--xy-amber-soft); border-color: #F1D79A; color: var(--xy-amber-ink); } .rv-photos { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; } .rv-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--xy-line); } .rv-reply { background: var(--xy-panel-bg); border-left: 3px solid var(--xy-primary); border-radius: 8px; padding: .55rem .8rem; margin-top: .6rem; font-size: .85rem; } .rv-reply p { margin: .2rem 0; } .rv-reply time { font-size: .72rem; color: var(--xy-muted); } .rev-row { padding: .9rem 0; border-bottom: 1px solid var(--xy-line); } .rev-row:last-child { border-bottom: 0; } .pm-fav { float: right; border: 0; background: var(--xy-chip); width: 36px; height: 36px; border-radius: 50%; color: var(--xy-primary); font-size: 1.1rem; } .fav-prod { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border: 1px solid var(--xy-line); border-radius: 12px; background: #fff; } .fav-prod .img { width: 52px; height: 52px; border-radius: 10px; background: var(--xy-chip) center/cover; flex: 0 0 52px; } .live-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 1rem; } @media (max-width: 1199.98px) { .live-wrap { grid-template-columns: 1fr; } } .live-map { position: relative; background: var(--xy-surface); border: 1px solid var(--xy-line-panel); border-radius: var(--xy-radius-card); overflow: hidden; } #liveMap { height: 640px; z-index: 0; } .live-legend { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: rgba(255,255,255,.95); border-radius: 10px; padding: .4rem .7rem; display: flex; gap: .8rem; font-size: .75rem; font-weight: 700; } .live-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .25rem; } .c-courier { background: #1F4FD1; } .c-order { background: #0E7A52; } .c-late { background: #D9381E; } .c-biz { background: #6B7280; } .lv-pin { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); } .lv-pin.c-biz { width: 22px; height: 22px; margin: 4px; font-size: .65rem; opacity: .75; } .lv-pin.stale { opacity: .45; } .lv-row { padding: .5rem 0; border-bottom: 1px solid var(--xy-line); font-size: .86rem; } .lv-row:last-child { border-bottom: 0; } .live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #0E7A52; box-shadow: 0 0 0 0 rgba(14,122,82,.5); animation: lvp 1.6s infinite; } .live-dot.off { background: #D9381E; animation: none; } @keyframes lvp { 70% { box-shadow: 0 0 0 8px rgba(14,122,82,0); } 100% { box-shadow: 0 0 0 0 rgba(14,122,82,0); } } .bulk-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 1rem; align-items: start; } @media (max-width: 1199.98px) { .bulk-wrap { grid-template-columns: 1fr; } } .bulk-list { max-height: 560px; overflow-y: auto; } .bulk-tabs .nav-link { color: var(--xy-muted); font-weight: 700; font-size: .82rem; border-radius: 999px; } .bulk-tabs .nav-link.active { background: var(--xy-ink); color: #fff; } .risk-row { padding: .9rem 1rem; border: 1px solid var(--xy-line); border-left: 4px solid var(--xy-line-strong); border-radius: 12px; margin-bottom: .6rem; } .risk-row.sev-high { border-left-color: var(--xy-primary); } .risk-row.sev-medium { border-left-color: #E7A21A; } .perf-bar { display: inline-block; width: 70px; height: 7px; background: var(--xy-chip); border-radius: 4px; overflow: hidden; margin-right: .4rem; vertical-align: middle; } .perf-bar i { display: block; height: 100%; } .perf-bar .g { background: var(--xy-green); } .perf-bar .a { background: #E7A21A; } .perf-bar .r { background: var(--xy-primary); } .tk-row { display: flex; align-items: center; gap: .6rem; padding: .7rem .2rem; border-bottom: 1px solid var(--xy-line); text-decoration: none; color: var(--xy-ink); } .tk-row:last-child { border-bottom: 0; } .tk-row:hover { background: var(--xy-panel-bg); } .tk-thread { display: flex; flex-direction: column; gap: .7rem; max-height: 520px; overflow-y: auto; padding: .3rem; } .tk-msg { border-radius: 14px; padding: .65rem .9rem; max-width: 88%; } .tk-msg.req { background: var(--xy-panel-bg); align-self: flex-start; } .tk-msg.admin { background: var(--xy-blue-soft); align-self: flex-end; } .tk-msg.internal { background: var(--xy-amber-soft); border: 1px dashed #E7A21A; } .tk-meta { display: flex; font-size: .75rem; color: var(--xy-muted); gap: .5rem; margin-bottom: .2rem; } .tk-body { font-size: .9rem; word-break: break-word; } .tpl-row { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem 0; border-top: 1px solid var(--xy-line); } .tpl-tag { width: 150px; flex: 0 0 150px; padding-top: .3rem; } .tpl-act { display: flex; flex-direction: column; gap: .3rem; width: 96px; flex: 0 0 96px; } @media (max-width: 767.98px) { .tpl-row { flex-wrap: wrap; } .tpl-tag, .tpl-act { width: 100%; flex: 1 1 100%; flex-direction: row; } } /* ---- Yeni sipariş uyarısı (işletme paneli) ---- */ /* Yeni sipariş uyarısı: kabul / ret zorunlu, geri sayımlı */ .oa-ov { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(1200px 600px at 50% 0, rgba(217, 56, 30, .28), transparent 60%), rgba(12, 14, 20, .72); backdrop-filter: blur(6px); animation: oa-fade .25s ease-out; } .oa-card { width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06); animation: oa-pop .35s cubic-bezier(.2, .9, .3, 1.2); } .oa-hero { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem 1.35rem; color: #fff; background: linear-gradient(135deg, #1a1c22 0%, #2b1b17 55%, #5a1f12 100%); overflow: hidden; } .oa-hero::before { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 120, 80, .45), transparent 70%); } .oa-bell { position: relative; flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; background: linear-gradient(135deg, #ff6a45, #D9381E); box-shadow: 0 8px 24px rgba(217, 56, 30, .55); } .oa-bell i.bi { animation: oa-shake .8s ease-in-out infinite; transform-origin: 50% 10%; } .oa-bell .oa-wave { position: absolute; inset: 0; border-radius: 16px; border: 2px solid rgba(255, 150, 120, .8); animation: oa-wave 1.6s ease-out infinite; } .oa-title { position: relative; flex: 1; min-width: 0; } .oa-title small { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #ffb59f; font-weight: 700; } .oa-title h2 { margin: .1rem 0 0; font-size: 1.3rem; font-weight: 800; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; } .oa-tag { display: inline-block; margin-top: .3rem; font-size: .7rem; font-weight: 700; padding: .15rem .6rem; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; } .oa-timer { position: relative; flex: none; width: 74px; height: 74px; } .oa-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); } .oa-timer circle { fill: none; stroke-width: 6; } .oa-timer .tr { stroke: rgba(255, 255, 255, .16); } .oa-timer .pg { stroke: #ffd166; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; } .oa-timer.low .pg { stroke: #ff5a5a; } .oa-timer .tx { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; } .oa-timer .tx b { font-size: 1.05rem; font-variant-numeric: tabular-nums; } .oa-timer .tx small { font-size: .55rem; color: #ffd7c9; letter-spacing: .04em; } .oa-body { padding: 1.1rem 1.35rem .4rem; overflow: auto; } .oa-cust { display: flex; align-items: center; gap: .8rem; } .oa-av { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; color: #D9381E; background: #fff1ec; } .oa-cust > div { flex: 1; min-width: 0; } .oa-cust strong { display: block; font-size: 1.02rem; } .oa-cust small { color: #5b6472; font-size: .8rem; } .oa-total { text-align: right; } .oa-total b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; } .oa-pay { display: inline-block; margin-top: .3rem; font-size: .68rem; font-weight: 700; padding: .12rem .55rem; border-radius: 99px; background: #e7f6ec; color: #17653a; } .oa-pay.cod { background: #fff4dd; color: #8a5a00; } .oa-items { list-style: none; margin: 1rem 0 0; padding: .35rem .85rem; border-radius: 16px; background: #f6f7f9; max-height: 25vh; overflow: auto; } .oa-items li { display: flex; gap: .7rem; padding: .55rem 0; border-bottom: 1px dashed #dfe3ea; } .oa-items li:last-child { border-bottom: 0; } .oa-items .q { flex: none; min-width: 2rem; font-weight: 800; color: #D9381E; } .oa-items .n { flex: 1; min-width: 0; font-weight: 600; } .oa-items .n em { display: block; font-style: normal; font-weight: 400; font-size: .78rem; color: #5b6472; } .oa-note { margin-top: .75rem; padding: .6rem .85rem; border-radius: 12px; background: #fff7e0; color: #7a5200; font-size: .85rem; border: 1px solid #f3dfa4; } .oa-prep { margin-top: 1rem; } .oa-prep > span { display: block; font-size: .72rem; font-weight: 700; color: #5b6472; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .4rem; } .oa-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .oa-chip { border: 1.5px solid #dfe3ea; background: #fff; border-radius: 99px; padding: .35rem .85rem; font-weight: 600; font-size: .85rem; cursor: pointer; transition: all .15s; } .oa-chip:hover { border-color: #b7bfcc; } .oa-chip.on { background: #1a1c22; border-color: #1a1c22; color: #fff; } .oa-hint { margin: .8rem 0 0; font-size: .75rem; color: #8a5a00; background: #fff7e0; padding: .35rem .7rem; border-radius: 10px; } .oa-actions { display: grid; grid-template-columns: 1fr 1.7fr; gap: .7rem; padding: 1rem 1.35rem 1.1rem; } .oa-btn { border: 0; border-radius: 16px; padding: .95rem 1rem; font-weight: 800; font-size: 1.02rem; display: flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; transition: transform .12s, box-shadow .12s, filter .12s; } .oa-btn:active { transform: scale(.98); } .oa-btn[disabled] { opacity: .6; cursor: wait; } .oa-accept { color: #fff; background: linear-gradient(135deg, #2fa866, #1e7a46); box-shadow: 0 10px 24px rgba(30, 122, 70, .4); } .oa-accept:hover { filter: brightness(1.06); } .oa-reject { color: #b3261e; background: #fff; box-shadow: inset 0 0 0 2px #f0c9c5; } .oa-reject:hover { background: #fdf1f0; } .oa-queue { text-align: center; font-size: .78rem; color: #5b6472; padding: 0 1.35rem 1rem; margin-top: -.3rem; } .oa-queue b { color: #D9381E; } .oa-rej { padding: 1.1rem 1.35rem 1.2rem; border-top: 1px solid #eceef2; background: #fdf6f5; } .oa-rej h3 { font-size: .95rem; font-weight: 800; margin: 0 0 .6rem; color: #b3261e; } .oa-rej textarea { width: 100%; margin-top: .6rem; border: 1.5px solid #e5c7c3; border-radius: 12px; padding: .6rem .8rem; font-size: .9rem; resize: none; } .oa-rej .oa-actions { padding: .8rem 0 0; grid-template-columns: 1fr 1.4fr; } .oa-btn.danger { color: #fff; background: linear-gradient(135deg, #e0483a, #b3261e); box-shadow: 0 10px 24px rgba(179, 38, 30, .35); } .oa-btn.ghost { color: #333; background: #fff; box-shadow: inset 0 0 0 2px #e3e6ec; } .oa-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1990; display: flex; flex-direction: column; gap: .6rem; width: min(360px, calc(100vw - 32px)); } .oa-toast { display: flex; gap: .75rem; align-items: center; padding: .8rem .9rem; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #1a1c22, #26302b); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); animation: oa-slide .3s ease-out; } .oa-toast .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #1e7a46; font-size: 1.1rem; } .oa-toast .tx { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.3; } .oa-toast .tx b { display: block; font-size: .92rem; } .oa-toast a { color: #ffd166; font-weight: 700; text-decoration: none; } .oa-toast button { border: 0; background: transparent; color: #aab; font-size: 1.1rem; } @keyframes oa-fade { from { opacity: 0; } } @keyframes oa-pop { from { transform: translateY(24px) scale(.94); opacity: 0; } } @keyframes oa-slide { from { transform: translateX(30px); opacity: 0; } } @keyframes oa-wave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes oa-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(6deg); } } @media (max-width: 480px) { .oa-hero { padding: 1rem; } .oa-timer { width: 62px; height: 62px; } .oa-actions { grid-template-columns: 1fr; } .oa-accept { order: -1; } } @media (prefers-reduced-motion: reduce) { .oa-card, .oa-ov, .oa-bell i.bi, .oa-bell .oa-wave, .oa-toast { animation: none; } } .ap-cmd { background: #f1f3f6; border-radius: 8px; padding: .5rem .75rem; margin: .25rem 0 0; font-size: .78rem; white-space: pre-wrap; word-break: break-all; } /* =================================================================== İşletme paneli · KARANLIK TEMA (html[data-theme="dark"], Bootstrap data-bs-theme ile birlikte) =================================================================== */ html[data-theme="dark"] { color-scheme: dark; --xy-ink: #e9ecf2; --xy-muted: #9ba4b4; --xy-faint: #7a8394; --xy-bg: #0f1218; --xy-panel-bg: #0f1218; --xy-surface: #171b23; --xy-chip: #232834; --xy-line: #2b313d; --xy-line-panel: #2b313d; --xy-line-strong: #384050; --xy-green-soft: #12301f; --xy-green-ink: #6fe0a4; --xy-blue-soft: #16264d; --xy-blue-ink: #9bb6ff; --xy-amber-soft: #3a2a0c; --xy-amber-ink: #ffc766; --xy-red-soft: #3a1914; --xy-red-ink: #ff9a88; --xy-sky-soft: #10303d; --xy-sky-ink: #7fd0f0; --bs-body-color: #e9ecf2; --bs-body-bg: #0f1218; --bs-border-color: #2b313d; --bs-link-color: #ff8a6b; --bs-link-hover-color: #ffa58c; } html[data-theme="dark"] body.panel-business { background: #0f1218; color: #e9ecf2; } html[data-theme="dark"] .panel-business .app-content { background: #0f1218; } html[data-theme="dark"] .panel-business .app-sidebar { background: #12151c; border-right-color: #232834; } html[data-theme="dark"] .panel-business .app-topbar { background: #12151c; border-bottom-color: #232834; } html[data-theme="dark"] .panel-business .sidebar-nav .nav-link { color: #c3cad8; } html[data-theme="dark"] .panel-business .sidebar-nav .nav-link:hover { background: #1b202a; color: #fff; } html[data-theme="dark"] .panel-business .sidebar-nav .nav-link.active { background: rgba(217, 56, 30, .18); color: #ff9a82; } html[data-theme="dark"] .panel-business .sidebar-brand a { color: #fff; } html[data-theme="dark"] .panel-business .btn-light, html[data-theme="dark"] .panel-business .badge.bg-light { --bs-btn-bg: #1b202a; --bs-btn-color: #e9ecf2; --bs-btn-border-color: #2b313d; --bs-btn-hover-bg: #232834; --bs-btn-hover-color: #fff; background-color: #1b202a !important; color: #e9ecf2 !important; border-color: #2b313d !important; } /* tema düğmesi */ .theme-toggle { width: 42px; padding: 0; position: relative; overflow: hidden; } .theme-toggle .bi-sun-fill { display: none; color: #ffc766; } .theme-toggle .bi-moon-stars-fill { color: #5b6bd1; } html[data-theme="dark"] .theme-toggle .bi-sun-fill { display: inline; } html[data-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; } /* yüzeyler (kart benzeri her şey) */ html[data-theme="dark"] .panel-business :is(.ph, .ss-i, .ok, .oc, .oh-card, .os-card, .od-card, .od-steps, .pf-card, .acc-card, .acc-hero, .acc-tabs-wrap, .acc-kpi, .acc-doc, .promo-tpl, .card, .xt-card, .modal-content, .dropdown-menu, .oa-toast) { background: #171b23; color: #e9ecf2; box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .35) !important; } html[data-theme="dark"] .panel-business .acc-hero { background: linear-gradient(135deg, #171b23, #241a18); } html[data-theme="dark"] .panel-business .pf-head { background: linear-gradient(135deg, #171b23, #241a18); border-bottom-color: #2b313d; } html[data-theme="dark"] .panel-business .pf-foot { background: #14181f; border-top-color: #2b313d; } html[data-theme="dark"] .panel-business :is(.oc-items, .oh-sum > div, .os-flow, .os-switch, .od-sums, .od-rows > div, .dm-box, .img-slot, .dz-link, .pm-row, .hours-card .hours-row, .tb-count, .oh-chip em, .od-count, .od-var, .ph-r .btn-outline-secondary, .oc-print, .acc-check:hover, .oa-chip) { background: #1e232d; color: #e9ecf2; border-color: #2b313d; } html[data-theme="dark"] .panel-business .hours-card .hours-row.is-closed { background: #14181f; } html[data-theme="dark"] .panel-business .os-mode { background: #171b23; border-color: #2b313d; } html[data-theme="dark"] .panel-business .os-mode.on { background: linear-gradient(180deg, #12301f, #171b23); border-color: #2fa866; } html[data-theme="dark"] .panel-business .os-mi { background: #232834; color: #c3cad8; } html[data-theme="dark"] .panel-business .os-mode.on .os-mi { background: linear-gradient(135deg, #2fa866, #1e7a46); color: #fff; } html[data-theme="dark"] .panel-business :is(.os-flow span, .oh-sum small) { background: #171b23; color: #e9ecf2; } html[data-theme="dark"] .panel-business .oh-sum small { background: transparent; color: #9ba4b4; } /* metin renkleri */ html[data-theme="dark"] .panel-business :is(.oc-no, .ot-no, .od-line a, .oc-who strong, .od-n strong, .os-hd h2, .oh-hd h2, .od-hd h2, .ph h1, .od-tl strong, .od-steps strong, .od-sums .tot, .oc-tot b, .ok-v, .ss-i b, .ot-cust strong, .od-cust strong, .tb-name strong, .os-mode strong, .promo-tpl strong, .ob-search input, .oc-items, .od-kv b, .oa-body, .os-switch strong, .oh-sum b) { color: #f1f3f8; } html[data-theme="dark"] .panel-business :is(.ph p, .os-hd p, .oh-hd p, .os-mode small, .ok-l, .ss-i small, .oc-age, .oc-who small, .od-tl small, .od-kv span, .od-sums > div, .od-hint, .od-hint2, .os-help, .os-tips ol, .tb-name small, .ot-cust small, .ot-sum, .od-inote, .os-switch small, .oh-sum small, .os-lbl, .od-lbl, .ob-hint, .oc-chip, .promo-tpl small, .cl-row small) { color: #9ba4b4; } html[data-theme="dark"] .panel-business .od-sums .disc dd, html[data-theme="dark"] .panel-business .od-sums .com { color: #6fe0a4; } html[data-theme="dark"] .panel-business .oc-items b, html[data-theme="dark"] .panel-business .od-q { color: #ff8a6b; } html[data-theme="dark"] .panel-business .od-q, html[data-theme="dark"] .panel-business .ot-av, html[data-theme="dark"] .panel-business .oc-av, html[data-theme="dark"] .panel-business .ot-sn { background: rgba(217, 56, 30, .18); color: #ff9a82; } html[data-theme="dark"] .panel-business .oc-sn, html[data-theme="dark"] .panel-business .od-sn { color: #ff8a6b; } html[data-theme="dark"] .panel-business .od-sn { background: #1e232d; } /* çipler, rozetler */ html[data-theme="dark"] .panel-business :is(.oc-chip, .oh-chip, .od-chip, .oa-chip) { background: #1e232d; border-color: #2b313d; color: #e9ecf2; } html[data-theme="dark"] .panel-business :is(.oh-chip.on, .od-chip.on, .oa-chip.on, .acc-tabs .nav-link.active, .page-item.active .page-link) { background: #f1f3f8; border-color: #f1f3f8; color: #14181f; } html[data-theme="dark"] .panel-business .oh-chip.on em { background: rgba(0, 0, 0, .12); color: #14181f; } html[data-theme="dark"] .panel-business .oc-chip.sch, html[data-theme="dark"] .panel-business .ot-sch { background: #2a2350; color: #c3b2ff; } html[data-theme="dark"] .panel-business .oc-chip.late { background: #3a1914; color: #ff9a88; } html[data-theme="dark"] .panel-business .oc-pay.paid, html[data-theme="dark"] .panel-business .oa-pay { background: #12301f; color: #6fe0a4; } html[data-theme="dark"] .panel-business .oc-pay.cod, html[data-theme="dark"] .panel-business .oa-pay.cod { background: #3a2a0c; color: #ffc766; } html[data-theme="dark"] .panel-business .ot-st { background: #232834; color: #c3cad8; } html[data-theme="dark"] .panel-business .ot-st.st-placed { background: #16264d; color: #9bb6ff; } html[data-theme="dark"] .panel-business :is(.ot-st.st-accepted, .ot-st.st-preparing) { background: #3a2a0c; color: #ffc766; } html[data-theme="dark"] .panel-business .ot-st.st-ready { background: #10303d; color: #7fd0f0; } html[data-theme="dark"] .panel-business :is(.ot-st.st-on_the_way, .ot-st.st-delivered) { background: #12301f; color: #6fe0a4; } html[data-theme="dark"] .panel-business :is(.ot-st.st-rejected, .ot-st.st-cancelled) { background: #3a1914; color: #ff9a88; } html[data-theme="dark"] .panel-business .oc-note, html[data-theme="dark"] .panel-business .od-note, html[data-theme="dark"] .panel-business .oa-note { background: #3a2a0c; border-color: #5a4210; color: #ffc766; } html[data-theme="dark"] .panel-business .od-final { background: #3a1914; border-color: #5a2a22; color: #ff9a88; } html[data-theme="dark"] .panel-business .od-line { background: #16264d; border-color: #24407f; } html[data-theme="dark"] .panel-business .od-line small { color: #9bb6ff; } html[data-theme="dark"] .panel-business .od-map { background: #16264d; color: #9bb6ff; } html[data-theme="dark"] .panel-business .od-opts span { background: #16264d; color: #9bb6ff; } html[data-theme="dark"] .panel-business :is(.ss-ico, .kc-ico, .kc-count) { background: #232834; color: #c3cad8; } html[data-theme="dark"] .panel-business .ss-i.ok .ss-ico { background: #12301f; color: #6fe0a4; } html[data-theme="dark"] .panel-business .ss-i.warn .ss-ico { background: #3a2a0c; color: #ffc766; } html[data-theme="dark"] .panel-business .ss-i.info .ss-ico { background: #16264d; color: #9bb6ff; } html[data-theme="dark"] .panel-business .ok-d.up { background: #12301f; color: #6fe0a4; } html[data-theme="dark"] .panel-business .ok-d.down { background: #3a1914; color: #ff9a88; } /* pano sütunları */ html[data-theme="dark"] .panel-business .kanban-col { background: #12151c; } html[data-theme="dark"] .panel-business .kc-empty { color: #6f7889; } html[data-theme="dark"] .panel-business .oc.is-new { box-shadow: 0 0 0 2px #4f7cff, 0 12px 30px rgba(79, 124, 255, .3) !important; } html[data-theme="dark"] .panel-business .oc.is-late { box-shadow: 0 0 0 2px #f0583d, 0 10px 26px rgba(217, 56, 30, .3) !important; } html[data-theme="dark"] .panel-business .oc-btn.no, html[data-theme="dark"] .panel-business .od-go.no, html[data-theme="dark"] .panel-business .oa-reject { background: #171b23; color: #ff9a88; box-shadow: inset 0 0 0 2px #5a2a22; } html[data-theme="dark"] .panel-business .oc-btn.dark, html[data-theme="dark"] .panel-business .od-go.dark { background: linear-gradient(135deg, #2d3340, #232834); } html[data-theme="dark"] .panel-business .od-act { border-color: #f1f3f8; } /* ilerleme / zaman çizgisi */ html[data-theme="dark"] .panel-business .od-dot { background: #232834; color: #6f7889; border-color: #171b23; box-shadow: 0 0 0 1px #2b313d; } html[data-theme="dark"] .panel-business .od-steps li::before { background: #2b313d; } html[data-theme="dark"] .panel-business :is(.od-steps li.done::before, .od-steps li.now::before) { background: linear-gradient(90deg, #2fa866, #1e7a46); } html[data-theme="dark"] .panel-business .od-steps li.done .od-dot { background: linear-gradient(135deg, #2fa866, #1e7a46); color: #fff; } html[data-theme="dark"] .panel-business .od-steps li.now .od-dot { background: linear-gradient(135deg, #ff7a52, #D9381E); color: #fff; } html[data-theme="dark"] .panel-business .od-steps li.todo strong { color: #6f7889; } html[data-theme="dark"] .panel-business .od-tl li::before { background: #2b313d; } html[data-theme="dark"] .panel-business .od-tl li:not(:first-child) .od-tdot { background: #5b6475; box-shadow: 0 0 0 4px #232834; } html[data-theme="dark"] .panel-business .od-tdot { box-shadow: 0 0 0 4px #3a1914; } html[data-theme="dark"] .panel-business :is(.od-items li, .od-kv, .oc-items li, .od-sums .tot) { border-color: #2b313d; } /* form elemanları */ html[data-theme="dark"] .panel-business :is(.form-control, .form-select, .ob-search input, .dataTables_filter input, .dataTables_length select) { background-color: #1e232d; border-color: #343b49; color: #e9ecf2; } html[data-theme="dark"] .panel-business :is(.form-control:disabled, .form-select:disabled, .form-control[readonly]) { background-color: #14181f; color: #8b93a1; } html[data-theme="dark"] .panel-business .form-control::placeholder { color: #6f7889; } html[data-theme="dark"] .panel-business .form-control:focus, html[data-theme="dark"] .panel-business .form-select:focus { border-color: #ff7a52; box-shadow: 0 0 0 4px rgba(255, 122, 82, .18); } html[data-theme="dark"] .panel-business .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3cad8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } html[data-theme="dark"] .panel-business .btn-outline-secondary, html[data-theme="dark"] .panel-business .btn-outline-dark { background: #1e232d; border-color: #343b49; color: #e9ecf2; } html[data-theme="dark"] .panel-business .btn-outline-secondary:hover, html[data-theme="dark"] .panel-business .btn-outline-dark:hover { background: #262c38; color: #fff; } html[data-theme="dark"] .panel-business .ph-r .btn-outline-secondary { background: #1e232d; color: #e9ecf2; } html[data-theme="dark"] .panel-business .dropdown-item { color: #e9ecf2; } html[data-theme="dark"] .panel-business .dropdown-item:hover, html[data-theme="dark"] .panel-business .dropdown-item:focus { background: #232834; color: #fff; } html[data-theme="dark"] .panel-business .modal-header { border-bottom-color: #2b313d; } html[data-theme="dark"] .panel-business .modal-footer { border-top-color: #2b313d; } html[data-theme="dark"] .panel-business .btn-close { filter: invert(1) grayscale(1); } html[data-theme="dark"] .panel-business .acc-alert.info { background: #16264d; border-color: #24407f; color: #b7c9ff; } html[data-theme="dark"] .panel-business .acc-alert.warn { background: #3a2a0c; border-color: #5a4210; color: #ffd48a; } html[data-theme="dark"] .panel-business .acc-chip { background: #232834; color: #c3cad8; } html[data-theme="dark"] .panel-business .acc-line:hover, html[data-theme="dark"] .panel-business .cl-row:hover { background: #1e232d; } html[data-theme="dark"] .panel-business .acc-table th { background: #1e232d; color: #9ba4b4; } /* tablolar */ html[data-theme="dark"] .panel-business .xtable table.dataTable thead th, html[data-theme="dark"] .panel-business #history table.dataTable thead th { color: #7a8394; border-bottom-color: #2b313d; } html[data-theme="dark"] .panel-business :is(.xtable table.dataTable tbody td, #history table.dataTable tbody td) { border-color: #232834; color: #e9ecf2; background: transparent; } html[data-theme="dark"] .panel-business :is(.xtable table.dataTable tbody tr:hover > td, #history table.dataTable tbody tr:hover > td) { background: #1e232d; } html[data-theme="dark"] .panel-business .table { --bs-table-bg: transparent; --bs-table-color: #e9ecf2; --bs-table-striped-bg: #1b202a; --bs-table-hover-bg: #1e232d; --bs-table-border-color: #2b313d; } html[data-theme="dark"] .panel-business .dataTables_wrapper :is(.dt-buttons .btn, .dataTables_info, .page-link) { background: #1e232d; border-color: #2b313d; color: #e9ecf2; } html[data-theme="dark"] .panel-business .dataTables_wrapper .dataTables_info { background: transparent; color: #9ba4b4; } html[data-theme="dark"] .panel-business .page-item .page-link { background: transparent; border: 0; color: #c3cad8; } html[data-theme="dark"] .panel-business .tb-code { background: rgba(217, 56, 30, .12); border-color: #8a3a28; color: #ff9a82; } html[data-theme="dark"] .panel-business .tb-use { color: #c3cad8; } html[data-theme="dark"] .panel-business .tb-use i { background: #2b313d; } html[data-theme="dark"] .panel-business .tb-st { color: #9ba4b4; } html[data-theme="dark"] .panel-business .tb-st.on { color: #6fe0a4; } html[data-theme="dark"] .panel-business .tb-role { background: #16264d; color: #9bb6ff; } html[data-theme="dark"] .panel-business .badge.bg-success-subtle, html[data-theme="dark"] .panel-business .xtable .badge.bg-success { filter: brightness(1.05); } /* ayar sayfaları */ html[data-theme="dark"] .panel-business :is(.od-ccode) { background: #f1f3f8; color: #14181f; } html[data-theme="dark"] .panel-business .os-preview { border-color: #2b313d; background: #171b23; } html[data-theme="dark"] .panel-business .pv-b i { background: #2b313d; } html[data-theme="dark"] .panel-business .pv-f u { box-shadow: inset 0 0 0 1.5px #5a2a22; color: #ff9a88; } html[data-theme="dark"] .panel-business .pv-f u.ok { color: #fff; background: #1e7a46; box-shadow: none; } html[data-theme="dark"] .panel-business .os-det { border-color: #343b49; } html[data-theme="dark"] .panel-business .os-ghost { background: #1e232d; border-color: #343b49; color: #e9ecf2; } html[data-theme="dark"] .panel-business .os-ico.a, html[data-theme="dark"] .panel-business .os-ico.b { filter: brightness(1.05); } html[data-theme="dark"] .panel-business .acc-head h2 i, html[data-theme="dark"] .panel-business .card-body > h2.h6 > i, html[data-theme="dark"] .panel-business .oh-hd h2 i { background: rgba(217, 56, 30, .18); } html[data-theme="dark"] .panel-business .ap-cmd, html[data-theme="dark"] .panel-business pre { background: #0f1218; color: #c3cad8; border-color: #2b313d; } html[data-theme="dark"] .panel-business code { color: #ff9a82; } html[data-theme="dark"] .panel-business .snd { background: #1e232d; border-color: #2b313d; color: #e9ecf2; } html[data-theme="dark"] .panel-business .snd.on { background: #12301f; border-color: #2fa866; } html[data-theme="dark"] .panel-business .snd small { color: #9ba4b4; } /* yeni sipariş uyarı penceresi */ html[data-theme="dark"] .oa-card { background: #171b23; color: #e9ecf2; box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 0 1px #2b313d; } html[data-theme="dark"] .oa-items { background: #1e232d; } html[data-theme="dark"] .oa-items li { border-color: #2b313d; } html[data-theme="dark"] .oa-items .n em, html[data-theme="dark"] .oa-cust small, html[data-theme="dark"] .oa-prep > span, html[data-theme="dark"] .oa-queue { color: #9ba4b4; } html[data-theme="dark"] .oa-av { background: rgba(217, 56, 30, .18); color: #ff9a82; } html[data-theme="dark"] .oa-note { background: #3a2a0c; border-color: #5a4210; color: #ffc766; } html[data-theme="dark"] .oa-chip { background: #1e232d; border-color: #343b49; color: #e9ecf2; } html[data-theme="dark"] .oa-chip.on { background: #f1f3f8; color: #14181f; } html[data-theme="dark"] .oa-rej { background: #241a18; border-top-color: #2b313d; } html[data-theme="dark"] .oa-rej textarea { background: #1e232d; border-color: #5a2a22; color: #e9ecf2; } html[data-theme="dark"] .oa-btn.ghost { background: #1e232d; color: #e9ecf2; box-shadow: inset 0 0 0 2px #343b49; } html[data-theme="dark"] .oa-hint { background: #3a2a0c; color: #ffc766; } html[data-theme="dark"] .oa-pay { background: #12301f; color: #6fe0a4; } /* select2 / yardımcılar */ html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection, html[data-theme="dark"] .select2-dropdown { background-color: #1e232d; border-color: #343b49; color: #e9ecf2; } html[data-theme="dark"] .panel-business .text-muted { color: #9ba4b4 !important; } html[data-theme="dark"] .panel-business .text-dark { color: #e9ecf2 !important; } html[data-theme="dark"] .panel-business hr { border-color: #2b313d; opacity: 1; } html[data-theme="dark"] .panel-business .alert-warning { background: #3a2a0c; border-color: #5a4210; color: #ffd48a; } html[data-theme="dark"] .panel-business .alert-info { background: #16264d; border-color: #24407f; color: #b7c9ff; } html[data-theme="dark"] .panel-business .alert-danger { background: #3a1914; border-color: #5a2a22; color: #ff9a88; } html[data-theme="dark"] .panel-business .alert-success { background: #12301f; border-color: #1e5a3a; color: #6fe0a4; } html[data-theme="dark"] .panel-business .save-bar { background: rgba(10, 12, 16, .95); border: 1px solid #2b313d; } html[data-theme="dark"] .panel-business :is(.os-tips b, .os-flow b, .os-hd b, .od-hint b, .acc-card b) { color: #f1f3f8; } html[data-theme="dark"] .panel-business .promo-tpl em { color: #ff9a82; } html[data-theme="dark"] .panel-business .promo-ic, html[data-theme="dark"] .panel-business .ph-ico { box-shadow: 0 8px 18px rgba(0, 0, 0, .4); } html[data-theme="dark"] .panel-business :is(.acc-logo) { box-shadow: none; } html[data-theme="dark"] .panel-business [style*="F3F4F6"] { background: #14181f !important; color: #9ba4b4; border-color: #2b313d !important; } .cp-note { display: flex; gap: .6rem; align-items: flex-start; margin: .6rem 0; padding: .7rem .8rem; border-radius: 12px; background: #FFF1D6; color: #7A4B00; font-size: .82rem; line-height: 1.35; } .cp-note i { margin-top: .15rem; } .cb-none { background: #fff1d6; color: #7a4b00; } .cb-none .cb-bike { color: #e08a00; } .cb-bubble em { font-style: normal; opacity: .75; } .cs-logo { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: 16px; background: #f6f7f9; } .cs-logo img { border-radius: 14px; background: #fff; padding: 4px; object-fit: contain; } /* Teslimat zamanı seçici: tarih kartları + saat çipleri */ .sp-sec { display: flex; align-items: center; justify-content: space-between; margin: .9rem 0 .5rem; } .sp-sec:first-of-type { margin-top: .2rem; } .sp-t { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5B5F68; display: inline-flex; align-items: center; gap: .4rem; } .sp-t i { color: #D9381E; } .sp-count { font-size: .74rem; font-weight: 700; color: #8E929B; } .sp-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: .4rem; } .sp-date { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .5rem .2rem; border: 1.5px solid #E4E5E8; border-radius: 14px; background: #fff; cursor: pointer; transition: all .15s; } .sp-date small { font-size: .68rem; font-weight: 700; color: #5B5F68; } .sp-date b { font-size: 1.15rem; font-weight: 800; line-height: 1.1; color: #16181D; } .sp-date em { font-style: normal; font-size: .64rem; font-weight: 700; color: #8E929B; text-transform: uppercase; letter-spacing: .04em; } .sp-date:hover { border-color: #D9381E; transform: translateY(-1px); } .sp-date.on { border-color: transparent; background: linear-gradient(145deg, #ff7a52, #D9381E); box-shadow: 0 10px 22px rgba(217, 56, 30, .32); } .sp-date.on small, .sp-date.on b, .sp-date.on em { color: #fff; } .sp-part { margin-bottom: .55rem; } .sp-ph { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8E929B; margin-bottom: .3rem; } .sp-ph i { color: #E7A21A; } .sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: .35rem; } .sp-slot { border: 1.5px solid #E4E5E8; background: #fff; border-radius: 12px; padding: .32rem 0; text-align: center; font-weight: 700; font-size: .84rem; font-variant-numeric: tabular-nums; color: #16181D; cursor: pointer; transition: all .12s; } .sp-slot:hover { border-color: #D9381E; color: #D9381E; } .sp-slot.on { background: #16181D; border-color: #16181D; color: #fff; box-shadow: 0 6px 14px rgba(22, 24, 29, .25); } .sp-picked { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; padding: .6rem .8rem; border-radius: 14px; background: linear-gradient(135deg, #E3F3EC, #F1FAF5); border: 1px solid #BFE3D2; } .sp-pi { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34c58a, #0E7A52); } .sp-picked small { display: block; font-size: .68rem; color: #3f7a63; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .sp-picked strong { font-size: .92rem; color: #0A5C3D; } /* ===== Şubeler (premium) — renkler panel değişkenlerinden gelir, karanlık modda otomatik uyar ===== */ .br-stats { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .br-stats > div { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; padding: .6rem .95rem; border-radius: 16px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12); } .br-stats i { grid-row: span 2; font-size: 1.2rem; color: #ffb59f; } .br-stats span { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #cdb6ad; } .br-stats b { font-size: .95rem; } .br-cta { border: 0; border-radius: 14px; padding: .7rem 1.1rem; font-weight: 800; color: #1a1c22; background: linear-gradient(135deg, #ffd0c2, #ff9a7a); box-shadow: 0 10px 24px rgba(255, 122, 82, .35); } .br-cta:hover { filter: brightness(1.05); transform: translateY(-1px); } .br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; } .br-card { position: relative; overflow: hidden; background: var(--xy-surface, #fff); color: var(--xy-ink); border-radius: 22px; padding: 1.2rem 1.25rem 1.1rem; box-shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 10px 26px rgba(20, 24, 36, .07); border: 1px solid var(--bs-border-color); transition: transform .18s, box-shadow .18s; } .br-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(20, 24, 36, .12); } .br-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #ff7a52, #D9381E); } .br-card.st-pending::before { background: linear-gradient(90deg, #f6c453, #e59b0c); } .br-card.st-rejected::before, .br-card.st-suspended::before { background: linear-gradient(90deg, #9aa3b2, #6b7482); } .br-top { display: flex; gap: .8rem; align-items: center; } .br-av { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff7a52, #D9381E); } .br-name { font-weight: 800; line-height: 1.2; } .br-loc { font-size: .8rem; color: var(--xy-muted); } .br-pill { margin-left: auto; font-size: .7rem; font-weight: 800; letter-spacing: .03em; padding: .28rem .6rem; border-radius: 999px; white-space: nowrap; } .br-pill.ok { background: var(--xy-green-soft, #e3f6ea); color: var(--xy-green-ink, #1e7a46); } .br-pill.warn { background: var(--xy-amber-soft, #fff3d6); color: var(--xy-amber-ink, #9a6200); } .br-pill.off { background: var(--xy-chip, #eceef2); color: var(--xy-muted); } .br-pill.bad { background: var(--xy-red-soft, #fde5e1); color: var(--xy-red-ink, #b3281a); } .br-pill .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: .3rem; } .br-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0 .8rem; } .br-tiles > div { text-align: center; padding: .55rem .3rem; border-radius: 14px; background: var(--xy-chip, #f3f4f7); } .br-tiles b { display: block; font-size: 1.02rem; } .br-tiles small { font-size: .68rem; color: var(--xy-muted); } .br-stock { margin-bottom: .8rem; } .br-stock .lbl { display: flex; justify-content: space-between; font-size: .74rem; color: var(--xy-muted); margin-bottom: .25rem; } .br-bar { height: 8px; border-radius: 99px; background: var(--xy-chip, #eceef2); overflow: hidden; } .br-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3ccf84, #1e7a46); } .br-meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .76rem; margin-bottom: .9rem; } .br-meta span { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 99px; background: var(--xy-chip, #f3f4f7); color: var(--xy-muted); } .br-meta code { color: var(--xy-ink); font-size: .74rem; } .br-act { display: flex; gap: .5rem; align-items: center; } .br-act form { margin: 0; } .br-adj { margin-top: .8rem; padding: .8rem; border-radius: 14px; background: var(--xy-chip, #f3f4f7); } .br-empty { text-align: center; padding: 2.6rem 1rem; border-radius: 24px; border: 2px dashed var(--bs-border-color); background: var(--xy-surface, #fff); margin-bottom: 1.2rem; } .br-empty .big { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 24px; display: grid; place-items: center; font-size: 2rem; color: #fff; background: linear-gradient(135deg, #ff7a52, #D9381E); box-shadow: 0 14px 30px rgba(217, 56, 30, .3); } .br-sec { background: var(--xy-surface, #fff); border: 1px solid var(--bs-border-color); border-radius: 22px; margin-bottom: 1rem; overflow: hidden; } .br-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.3rem; font-weight: 800; } .br-sec > summary::-webkit-details-marker { display: none; } .br-sec > summary small { font-weight: 500; color: var(--xy-muted); } .br-sec > summary .chev { margin-left: auto; transition: transform .2s; } .br-sec[open] > summary .chev { transform: rotate(180deg); } .br-sec .br-body { padding: 0 1.3rem 1.3rem; } .br-plist { max-height: 250px; overflow: auto; border: 1px solid var(--bs-border-color); border-radius: 14px; padding: .35rem .6rem; } /* Sihirbaz */ .brw-import { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 2px solid var(--bs-border-color); border-radius: 18px; cursor: pointer; transition: .15s; margin: 0; } .brw-import:has(input:checked) { border-color: #1e7a46; background: var(--xy-green-soft, #f2fbf6); } .brw-import > input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: #1e7a46; } .brw-import .ico { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, #2fa866, #1e7a46); } .brw-import strong { display: block; } .brw-import small { display: block; color: var(--xy-muted); font-size: .8rem; line-height: 1.45; margin-top: .15rem; } .brw .modal-content { border: 0; border-radius: 26px; overflow: hidden; background: var(--xy-surface, #fff); color: var(--xy-ink); } .brw-head { padding: 1.2rem 1.5rem 1rem; color: #fff; background: radial-gradient(520px 220px at 90% -30%, rgba(255, 120, 80, .4), transparent 70%), linear-gradient(135deg, #1a1c22 0%, #2b1b17 65%, #4a1c10 100%); } .brw-head h5 { margin: 0 0 .9rem; font-weight: 800; } .brw-steps { display: flex; align-items: center; gap: .4rem; } .brw-step { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; color: #b9a69e; white-space: nowrap; } .brw-step i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .8rem; border: 2px solid #6b5a53; } .brw-step.on { color: #fff; } .brw-step.on i { border-color: #ff9a7a; background: #ff7a52; color: #fff; } .brw-step.done { color: #ffd0c2; } .brw-step.done i { border-color: #3ccf84; background: #1e7a46; color: #fff; } .brw-line { flex: 1; height: 2px; background: #5b4a43; min-width: 12px; } .brw-line.done { background: #3ccf84; } .brw-body { padding: 1.3rem 1.5rem; min-height: 360px; } .brw-pane { display: none; } .brw-pane.on { display: block; animation: brwIn .22s ease; } @keyframes brwIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } .brw-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: 1rem 1.5rem; border-top: 1px solid var(--bs-border-color); } #brwMap { height: 330px; border-radius: 18px; border: 1px solid var(--bs-border-color); } .brw-search { position: relative; } .brw-res { position: absolute; z-index: 800; left: 0; right: 0; top: 100%; background: var(--xy-surface, #fff); border: 1px solid var(--bs-border-color); border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, .2); overflow: hidden; } .brw-res button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .55rem .8rem; font-size: .82rem; color: var(--xy-ink); } .brw-res button:hover { background: var(--xy-chip); } .brw-ok { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--xy-green-ink, #1e7a46); } .brw-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; } .brw-sum > div { border: 1px solid var(--bs-border-color); border-radius: 16px; padding: .9rem 1rem; } .brw-sum h6 { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--xy-muted); margin-bottom: .5rem; } .brw-sum dl { margin: 0; font-size: .86rem; } .brw-sum dt { font-weight: 600; color: var(--xy-muted); font-size: .76rem; } .brw-sum dd { margin: 0 0 .4rem; word-break: break-word; } .brw-pw { height: 6px; border-radius: 9px; background: var(--xy-chip); overflow: hidden; margin-top: .35rem; } .brw-pw i { display: block; height: 100%; width: 0; transition: width .2s, background .2s; } @media (max-width: 575px) { .brw-step span { display: none; } .brw-body { padding: 1rem; min-height: 0; } #brwMap { height: 260px; } } /* ===== Üst çubuk (minimal kurumsal) ===== */ .app-topbar.tb { height: 64px; padding: 0 1.4rem; gap: 1rem; background: var(--xy-surface, #fff); border-bottom: 1px solid var(--bs-border-color); box-shadow: 0 1px 0 rgba(20, 24, 36, .02), 0 8px 24px -18px rgba(20, 24, 36, .25); } .tb-head { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; } .tb-title { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; color: var(--xy-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-sub { font-size: .74rem; color: var(--xy-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-right { margin-left: auto; display: flex; align-items: center; gap: .45rem; } .tb-sep { width: 1px; height: 24px; background: var(--bs-border-color); margin: 0 .3rem; } .tb-ico { position: relative; width: 38px; height: 38px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--xy-muted); display: inline-grid; place-items: center; font-size: 1.05rem; transition: .15s; padding: 0; } .tb-ico:hover { background: var(--xy-chip, #f1f2f5); color: var(--xy-ink); } .tb-pill { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--bs-border-color); background: var(--xy-surface, #fff); color: var(--xy-ink); font-size: .8rem; font-weight: 600; transition: .15s; } .tb-pill:hover { background: var(--xy-chip, #f1f2f5); } .tb-pill .tb-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ccf84; box-shadow: 0 0 0 3px rgba(60, 207, 132, .18); } .tb-pill.warn { border-color: #f1c27a; background: var(--xy-amber-soft, #fff6e3); } .tb-pill.warn .tb-dot { background: #e59b0c; box-shadow: 0 0 0 3px rgba(229, 155, 12, .2); } .tb-pill.info .tb-dot { background: #4c8dff; box-shadow: 0 0 0 3px rgba(76, 141, 255, .2); } .tb-chev { font-size: .65rem; color: var(--xy-faint, #8a93a3); } .tb-user { display: inline-flex; align-items: center; gap: .6rem; height: 44px; padding: 0 .55rem 0 .3rem; border-radius: 999px; border: 1px solid transparent; background: transparent; transition: .15s; color: var(--xy-ink); } .tb-user:hover { background: var(--xy-chip, #f1f2f5); } .tbu-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; background: linear-gradient(135deg, #1a1c22, #4a1c10); } .tb-who { flex-direction: column; text-align: left; line-height: 1.15; } .tb-who b { font-size: .82rem; font-weight: 700; } .tb-who small { font-size: .68rem; color: var(--xy-muted); } .tb-menu { border-radius: 14px; border: 1px solid var(--bs-border-color); box-shadow: 0 18px 40px rgba(20, 24, 36, .16); padding: .4rem; min-width: 210px; } .tb-menu .dropdown-item { border-radius: 9px; font-size: .86rem; padding: .5rem .7rem; } .tb-menu .dropdown-item.active { background: var(--xy-chip, #f1f2f5); color: var(--xy-ink); font-weight: 700; } .tb-menu-h { padding: .35rem .7rem .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--xy-faint, #8a93a3); list-style: none; } html[data-theme="dark"] .panel-business .app-topbar.tb { background: #12151c; } html[data-theme="dark"] .tbu-av { background: linear-gradient(135deg, #ff7a52, #D9381E); } @media (max-width: 575px) { .app-topbar.tb { padding: 0 .8rem; gap: .5rem; } .tb-sep { display: none; } } .brw-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; } .brw-kind { display: flex; gap: .8rem; align-items: flex-start; padding: .95rem 1rem; border: 2px solid var(--bs-border-color); border-radius: 18px; cursor: pointer; margin: 0; transition: .15s; } .brw-kind input { position: absolute; opacity: 0; pointer-events: none; } .brw-kind.on { border-color: #D9381E; background: linear-gradient(180deg, rgba(255, 122, 82, .1), transparent); box-shadow: 0 8px 22px rgba(217, 56, 30, .12); } .brw-kind .ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; background: var(--xy-chip, #f1f2f5); color: var(--xy-ink); } .brw-kind.on .ico { background: linear-gradient(135deg, #ff7a52, #D9381E); color: #fff; } .brw-kind strong { display: block; } .brw-kind small { display: block; color: var(--xy-muted); font-size: .78rem; line-height: 1.45; margin-top: .15rem; } .brw-fbox { border: 1px dashed var(--bs-border-color); border-radius: 16px; padding: .9rem 1rem; background: var(--xy-chip, #f7f8fa); } .br-kind { display: inline-block; margin-left: .35rem; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 6px; vertical-align: middle; background: var(--xy-chip, #eceef2); color: var(--xy-muted); } .br-kind.fr { background: #efe7ff; color: #5b3bb5; } html[data-theme="dark"] .br-kind.fr { background: #2a2145; color: #c7b3ff; } /* Sihirbaz: form, kaydırılabilir modal içinde gövde kayar, alt çubuk (Geri / Devam) her zaman görünür kalır */ .brw .modal-dialog { max-width: 1040px; } .brw .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; } .brw .brw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .brw .brw-foot { flex: none; background: var(--xy-surface, #fff); } .brw .brw-head { flex: none; } /* ===== Destek ===== */ .sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1rem; } .sp-kpi { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-radius: 18px; border: 1px solid var(--bs-border-color); background: var(--xy-surface, #fff); } .sp-kpi > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; font-size: 1.15rem; background: var(--xy-chip, #f1f2f5); color: var(--xy-ink); } .sp-kpi b { display: block; font-size: 1.3rem; line-height: 1.1; } .sp-kpi span { font-size: .76rem; color: var(--xy-muted); } .sp-lock { border-color: #f1c27a; background: var(--xy-amber-soft, #fffaf0); } .sp-steps { list-style: none; display: flex; gap: .4rem; padding: 0; margin: .4rem 0 1rem; } .sp-steps li { flex: 1; display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--xy-muted); position: relative; } .sp-steps li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 800; border: 2px solid var(--bs-border-color); background: var(--xy-surface, #fff); flex: none; } .sp-steps li.on { color: var(--xy-ink); font-weight: 700; } .sp-steps li.on i { border-color: #D9381E; background: #D9381E; color: #fff; } .sp-steps li.done i { border-color: #1e7a46; background: #1e7a46; color: #fff; } .sp-steps li::after { content: ""; flex: 1; height: 2px; background: var(--bs-border-color); margin-left: .3rem; } .sp-steps li:last-child::after { display: none; } @media (max-width: 575px) { .sp-steps li span { display: none; } } /* ===== Başvuru incelemesi ===== */ .rv-hero { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; padding: 1.4rem 1.6rem; margin-bottom: 1rem; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #1f2430 0%, #2b3140 60%, #3a2a24 100%); box-shadow: 0 14px 34px rgba(20, 24, 36, .18); } .rv-id { display: flex; gap: 1rem; align-items: center; flex: 1 1 380px; min-width: 0; } .rv-av { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; background: linear-gradient(135deg, #ff7a52, #D9381E); } .rv-hero h1 { margin: .25rem 0 .1rem; font-size: 1.45rem; font-weight: 800; } .rv-hero h1 small { font-weight: 600; color: #cfd5e2; font-size: .9rem; } .rv-sub { font-size: .82rem; color: #b9c1d1; } .rv-sub a { color: #ffb59f; } .rv-kind .br-kind { margin: 0 .35rem 0 0; } .rv-score { text-align: center; } .rv-score span { display: block; font-size: .7rem; color: #b9c1d1; text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; } .rv-ring { --p: 0; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#3ccf84 calc(var(--p) * 1%), rgba(255,255,255,.15) 0); position: relative; margin: 0 auto; } .rv-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #2b3140; } .rv-ring b { position: relative; font-size: .85rem; } .rv-act { display: flex; gap: .5rem; } .rv-card { background: var(--xy-surface, #fff); border: 1px solid var(--bs-border-color); border-radius: 18px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; } .rv-h { font-weight: 800; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; } .rv-h small { font-weight: 500; color: var(--xy-muted); font-size: .74rem; margin-left: .3rem; } .rv-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .5rem .9rem; } .rv-checks li { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; } .rv-checks small { display: block; color: var(--xy-muted); font-size: .74rem; } .rv-checks .s-ok i { color: #1e7a46; } .rv-checks .s-warn i { color: #e59b0c; } .rv-checks .s-bad i { color: #d9381e; } .rv-doc { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--bs-border-color); } .rv-doc:last-child { border-bottom: 0; } .rv-dico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--xy-chip); font-size: 1.1rem; } .rv-dl { margin: 0; font-size: .85rem; } .rv-dl dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--xy-muted); } .rv-dl dd { margin: 0 0 .55rem; word-break: break-word; } .rv-log { display: flex; justify-content: space-between; gap: .6rem; font-size: .8rem; padding: .3rem 0; border-bottom: 1px dashed var(--bs-border-color); } .rv-log span { color: var(--xy-muted); } .rg-views { margin-left: auto; margin-right: .6rem; } .rg-lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: .25rem; } .rg-lg.on { background: #1e7a46; } .rg-lg.off { background: #9aa3b2; } /* ===== Yönetici paneli: sakin, açık ve kurumsal görünüm ===== */ .panel-admin { --xy-primary: #4a62c9; --xy-primary-dark: #3b4fa8; --bs-primary: #4a62c9; --bs-primary-rgb: 74, 98, 201; --bs-link-color: #3b4fa8; --bs-link-hover-color: #4a62c9; --xy-bg: #f5f6f9; --xy-panel-bg: #f5f6f9; --xy-line-panel: #e6e9f0; --xy-sidebar-active: #eef1fb; } .panel-admin .app-sidebar { background: #fff; color: var(--xy-ink); border-right: 1px solid var(--xy-line-panel); } .panel-admin .sidebar-brand { border-bottom: 0; } .panel-admin .sidebar-brand a { color: var(--xy-ink); } .panel-admin .sidebar-brand small { color: var(--xy-muted) !important; } .panel-admin .sidebar-nav .nav-link { color: #4a5160; font-weight: 600; } .panel-admin .sidebar-nav .nav-link:hover { background: #f1f3f8; color: var(--xy-ink); } .panel-admin .sidebar-nav .nav-link.active { background: var(--xy-sidebar-active); color: #3b4fa8; box-shadow: inset 3px 0 0 #4a62c9; } .panel-admin .sidebar-nav .nav-header { color: #8b93a3; } .panel-admin .app-topbar.tb { background: #fff; box-shadow: none; } .panel-admin .tbu-av { background: linear-gradient(135deg, #6f86dc, #4a62c9); } .panel-admin .card, .panel-admin .acc-card, .panel-admin .xt-card, .panel-admin .rv-card, .panel-admin .sp-kpi { box-shadow: none; border: 1px solid var(--xy-line-panel); border-radius: 14px; } .panel-admin .btn-primary { --bs-btn-bg: #4a62c9; --bs-btn-border-color: #4a62c9; --bs-btn-hover-bg: #3b4fa8; --bs-btn-hover-border-color: #3b4fa8; --bs-btn-active-bg: #3b4fa8; --bs-btn-active-border-color: #3b4fa8; --bs-btn-disabled-bg: #4a62c9; --bs-btn-disabled-border-color: #4a62c9; } .panel-admin .btn-outline-primary { --bs-btn-color: #4a62c9; --bs-btn-border-color: #4a62c9; --bs-btn-hover-bg: #4a62c9; --bs-btn-hover-border-color: #4a62c9; } .panel-admin .form-control:focus, .panel-admin .form-select:focus { border-color: #8fa0e6; box-shadow: 0 0 0 .2rem rgba(74, 98, 201, .15); } .panel-admin .acc-pills a.on, .panel-admin .nav-pills .nav-link.active { background: #4a62c9; color: #fff; } .panel-admin .sp-kpi > i { background: #eef1fb; color: #4a62c9; } .panel-admin .rv-hero, .panel-admin .os-hero { background: linear-gradient(135deg, #eef1fb 0%, #f7f8fc 100%); color: var(--xy-ink); box-shadow: none; border: 1px solid var(--xy-line-panel); } .panel-admin .rv-sub, .panel-admin .os-hero p { color: var(--xy-muted); } .panel-admin .rv-hero h1 small { color: var(--xy-muted); } .panel-admin .rv-sub a { color: #3b4fa8; } .panel-admin .rv-score span { color: var(--xy-muted); } .panel-admin .rv-ring::before { background: #fff; } .panel-admin .rv-ring { background: conic-gradient(#4a62c9 calc(var(--p) * 1%), #e1e5f0 0); } .panel-admin .rv-ring b { color: var(--xy-ink); } .panel-admin .rv-av { background: linear-gradient(135deg, #6f86dc, #4a62c9); } .panel-admin .rv-act .btn-outline-light { color: #b3281a; border-color: #e7b4ab; background: #fff; } .panel-admin .ph { box-shadow: none; border: 1px solid var(--xy-line-panel); border-radius: 14px; } .panel-admin .ph-ico { background: linear-gradient(135deg, #6f86dc, #4a62c9); box-shadow: none; } .panel-admin .table > :not(caption) > * > * { border-bottom-color: #eef0f5; } .panel-admin .dz-info { background: #f1f4fc; border-color: #dde4f7; } .panel-admin .brand-mark { background: #D9381E; } /* marka işareti kırmızı kalır */ /* ===== Destek ekleri ===== */ .sp-attach { border: 1.5px dashed var(--bs-border-color); border-radius: 14px; padding: .7rem .85rem; margin-bottom: .8rem; transition: .15s; } .sp-attach.drag { border-color: #D9381E; background: var(--xy-chip, #f7f8fa); } .sp-attach-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .sp-hint { font-size: .72rem; color: var(--xy-muted); flex: 1 1 220px; } .sp-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .1rem; } .sp-files:not(:empty) { margin-top: .6rem; } .sp-file { position: relative; display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem .3rem .35rem; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--xy-surface, #fff); font-size: .76rem; max-width: 100%; } .sp-file img { width: 38px; height: 38px; object-fit: cover; border-radius: 7px; } .sp-file > i { font-size: 1.5rem; color: #b3281a; width: 38px; text-align: center; } .sp-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .sp-file button { border: 0; background: none; font-size: 1.1rem; line-height: 1; color: var(--xy-muted); padding: 0 .15rem; } .sp-file button:hover { color: #d9381e; } .tk-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; } .tk-files a { display: flex; align-items: center; gap: .45rem; padding: .25rem .55rem .25rem .3rem; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--xy-surface, #fff); color: var(--xy-ink); text-decoration: none; font-size: .75rem; } .tk-files img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; } .tk-files .bi { font-size: 1.4rem; } .tk-ctx { font-size: .74rem; color: var(--xy-muted); } .sp-shotbox { margin-top: .9rem; padding: .8rem; border: 1px dashed #f1c27a; border-radius: 14px; background: var(--xy-surface, #fff); } .sp-shotbox img { width: 100%; max-height: 190px; object-fit: contain; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--xy-chip, #f3f4f7); } /* ===== Destek talebi (yönetici) ===== */ .st-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; padding: 1.2rem 1.4rem; margin-bottom: 1rem; border-radius: 18px; border: 1px solid var(--bs-border-color); background: var(--xy-surface, #fff); } .st-l { flex: 1 1 420px; min-width: 0; } .st-head h1 { font-size: 1.35rem; font-weight: 800; margin: .5rem 0 .2rem; } .st-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .st-no { font-size: .74rem; color: var(--xy-muted); font-weight: 700; letter-spacing: .04em; } .st-sub { font-size: .8rem; color: var(--xy-muted); } .st-sub code { font-size: .76rem; } .st-sla { display: flex; gap: .6rem; } .st-s { min-width: 96px; text-align: center; padding: .55rem .8rem; border-radius: 14px; background: var(--xy-chip, #f3f4f7); } .st-s span { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--xy-muted); } .st-s b { font-size: 1.05rem; } .st-s.warn { background: var(--xy-amber-soft, #fff3d6); } .st-s.bad { background: var(--xy-red-soft, #fde5e1); color: #b3281a; } .st-thread { display: flex; flex-direction: column; gap: .75rem; max-height: 560px; overflow-y: auto; padding: .2rem .3rem .6rem; } .st-day { text-align: center; position: relative; margin: .4rem 0; } .st-day::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--bs-border-color); } .st-day span { position: relative; background: var(--xy-surface, #fff); padding: 0 .7rem; font-size: .7rem; color: var(--xy-muted); font-weight: 700; } .st-msg { display: flex; gap: .6rem; align-items: flex-end; max-width: 86%; } .st-msg.admin { align-self: flex-end; flex-direction: row-reverse; } .st-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .72rem; color: #fff; background: linear-gradient(135deg, #8a93a3, #5b6577); } .st-msg.admin .st-av { background: linear-gradient(135deg, #6f86dc, #4a62c9); } .st-av.lg { width: 42px; height: 42px; font-size: .85rem; } .st-bub { padding: .6rem .85rem; border-radius: 16px; background: var(--xy-chip, #f1f2f6); } .st-msg.admin .st-bub { background: #e8ecfb; } .st-msg.internal .st-bub { background: var(--xy-amber-soft, #fff6e3); border: 1px dashed #e3b45c; } .st-who { display: flex; gap: .5rem; align-items: center; font-size: .74rem; } .st-who time { margin-left: auto; color: var(--xy-muted); } .st-body { font-size: .9rem; margin-top: .15rem; word-break: break-word; } .st-composer { margin-top: .8rem; padding-top: .9rem; border-top: 1px solid var(--bs-border-color); } .st-composer.is-note textarea { background: var(--xy-amber-soft, #fffaf0); } .st-tabs { display: flex; gap: .3rem; margin-bottom: .7rem; align-items: center; } .st-tabs button { border: 0; background: var(--xy-chip, #f1f2f6); border-radius: 10px; padding: .35rem .8rem; font-size: .8rem; font-weight: 700; color: var(--xy-muted); } .st-tabs button.on { background: #4a62c9; color: #fff; } .st-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; } .st-mini > div { padding: .5rem; border-radius: 12px; background: var(--xy-chip, #f3f4f7); text-align: center; } .st-mini b { display: block; } .st-mini span { font-size: .66rem; color: var(--xy-muted); } .sp-top { margin-bottom: .9rem; } .sp-top h1 { font-size: 1.25rem; font-weight: 800; margin: 0; } .sp-top p { margin: .1rem 0 0; font-size: .84rem; color: var(--xy-muted); } /* ===== Destek talebi başlığı (talep sahibi) ===== */ .tkh-back { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--xy-muted); text-decoration: none; margin-bottom: .55rem; } .tkh-back:hover { color: var(--xy-ink); } .tkh { position: relative; overflow: hidden; background: var(--xy-surface, #fff); border: 1px solid var(--bs-border-color); border-radius: 20px; padding: 1.15rem 1.3rem 1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(20, 24, 36, .04), 0 12px 28px -16px rgba(20, 24, 36, .18); } .tkh::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #f6c453, #e59b0c); } .tkh-pending::before { background: linear-gradient(180deg, #7c9bff, #2b59d9); } .tkh-resolved::before { background: linear-gradient(180deg, #3ccf84, #1e7a46); } .tkh-closed::before { background: linear-gradient(180deg, #b6bdca, #8a93a3); } .tkh-top { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: space-between; align-items: center; } .tkh-id { display: flex; gap: .9rem; align-items: center; min-width: 0; flex: 1 1 320px; } .tkh-ico { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, #ff7a52, #D9381E); box-shadow: 0 8px 18px rgba(217, 56, 30, .25); } .tkh-resolved .tkh-ico { background: linear-gradient(135deg, #3ccf84, #1e7a46); box-shadow: 0 8px 18px rgba(30, 122, 70, .25); } .tkh-closed .tkh-ico { background: linear-gradient(135deg, #a3abb9, #7a8394); box-shadow: none; } .tkh-pending .tkh-ico { background: linear-gradient(135deg, #7c9bff, #2b59d9); box-shadow: 0 8px 18px rgba(43, 89, 217, .25); } .tkh-no { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--xy-muted); } .tkh h1 { margin: .1rem 0 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; word-break: break-word; } .tkh-act { display: flex; gap: .5rem; } .tkh-btn { display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .95rem; border-radius: 11px; border: 1px solid var(--bs-border-color); background: var(--xy-surface, #fff); color: var(--xy-ink); font-size: .84rem; font-weight: 700; transition: .15s; } .tkh-btn:hover { background: var(--xy-chip, #f1f2f6); } .tkh-btn.ok { background: #e3f6ea; border-color: #bfe6cd; color: #1e7a46; } .tkh-btn.ok:hover { background: #d3f0de; } .tkh-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin: .85rem 0 .9rem; font-size: .8rem; color: var(--xy-muted); } .tkh-meta i { margin-right: .3rem; } .tkh-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .65rem; border-radius: 999px; font-weight: 800; font-size: .74rem; background: var(--xy-amber-soft, #fff3d6); color: var(--xy-amber-ink, #9a6200); } .tkh-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin: 0; } .tkh-pending .tkh-pill { background: #e8eefc; color: #2b59d9; } .tkh-resolved .tkh-pill { background: #e3f6ea; color: #1e7a46; } .tkh-closed .tkh-pill { background: var(--xy-chip, #eceef2); color: var(--xy-muted); } .tkh-new { padding: .2rem .6rem; border-radius: 999px; background: #e8eefc; color: #2b59d9; font-weight: 800; font-size: .72rem; } .tkh-new i { margin-right: .25rem; } .tkh-steps { list-style: none; display: flex; padding: 0; margin: 0; gap: .35rem; } .tkh-steps li { flex: 1; font-size: .7rem; color: var(--xy-muted); } .tkh-steps li i { display: block; height: 5px; border-radius: 99px; background: var(--xy-chip, #e6e9ef); margin-bottom: .35rem; } .tkh-steps li.done i { background: #1e7a46; } .tkh-steps li.on i { background: linear-gradient(90deg, #1e7a46, #D9381E); } .tkh-steps li.on { color: var(--xy-ink); font-weight: 700; } html[data-theme="dark"] .tkh-btn.ok { background: #14301f; border-color: #1e5a38; color: #6fdca0; } html[data-theme="dark"] .tkh-pending .tkh-pill { background: #16264d; color: #9bb6ff; } html[data-theme="dark"] .tkh-new { background: #16264d; color: #9bb6ff; } @media (max-width: 575px) { .tkh-steps li span { display: none; } .tkh-act { width: 100%; } .tkh-btn { flex: 1; justify-content: center; } } .cms-body { font-size: 1rem; line-height: 1.75; } .cms-body h2 { font-size: 1.35rem; font-weight: 800; margin: 1.6rem 0 .6rem; } .cms-body h3 { font-size: 1.15rem; font-weight: 700; margin: 1.3rem 0 .5rem; } .cms-body blockquote { border-left: 4px solid #D9381E; padding: .4rem 1rem; color: var(--xy-muted); background: var(--xy-chip, #f6f7f9); border-radius: 0 10px 10px 0; } .cms-body img { margin: .6rem 0; } /* Site footer (premium) */ .site-footer { background: #14161b; color: #aeb2bc; border-top: 0; margin-top: 4rem !important; position: relative; } .site-footer a { color: #d7dae1; text-decoration: none; transition: color .15s, transform .15s; } .site-footer a:hover { color: #fff; } .sf-cta { background: linear-gradient(120deg, #F0502F 0%, #D9381E 45%, #B42B14 100%); color: #fff; } .sf-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; padding-top: 1.9rem; padding-bottom: 1.9rem; } .sf-cta h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .2rem; letter-spacing: -.01em; } .sf-cta p { margin: 0; opacity: .88; } .sf-cta-btns { display: flex; gap: .6rem; flex-wrap: wrap; } .site-footer .sf-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.15rem; border-radius: 999px; font-weight: 700; font-size: .9rem; } .site-footer .sf-btn-primary { background: #fff; color: #B42B14; box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); } .site-footer .sf-btn-primary:hover { color: #8f200d; transform: translateY(-1px); } .site-footer .sf-btn-ghost { border: 1.5px solid rgba(255,255,255,.65); color: #fff; } .site-footer .sf-btn-ghost:hover { background: rgba(255,255,255,.14); } .sf-main { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 2.5rem; padding-top: 3rem; padding-bottom: 2.5rem; } .sf-logo { display: inline-flex; align-items: center; gap: .6rem; color: #fff !important; font-weight: 800; font-size: 1.25rem; } .sf-logo .brand-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, #F0502F, #B42B14); box-shadow: 0 6px 14px -4px rgba(217,56,30,.6); } .sf-brand p { margin: .9rem 0 1rem; max-width: 320px; line-height: 1.6; font-size: .92rem; } .sf-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .sf-badges li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: #d7dae1; font-size: .78rem; font-weight: 600; } .sf-badges i { color: #ff8a6b; } .sf-col { display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; } .sf-col h4 { color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .5rem; } .sf-col a:hover { transform: translateX(3px); } .sf-bottom { border-top: 1px solid rgba(255,255,255,.08); } .sf-bottom-in { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding-top: 1.1rem; padding-bottom: 1.1rem; font-size: .82rem; color: #868b96; } .sf-pay i { margin-right: .35rem; color: #aeb2bc; } @media (max-width: 991px) { .sf-main { grid-template-columns: 1fr 1fr; gap: 2rem; } .sf-brand { grid-column: 1 / -1; } } @media (max-width: 575px) { .sf-main { grid-template-columns: 1fr 1fr; padding-top: 2.2rem; } .sf-cta-btns, .sf-cta-btns .sf-btn { width: 100%; justify-content: center; } .sf-bottom-in { flex-direction: column; text-align: center; } } /* Ekstre */ .st-net th { font-size: 1.05rem; background: var(--xy-chip); } .st-sum td:first-child { font-weight: 600; white-space: nowrap; } .st-det td { font-size: .86rem; } /* Zengin metin editörü ve içerik */ .cms-topbar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; } .cms-title { width: 100%; border: 0; border-bottom: 2px solid var(--xy-line, #e4e4e0); background: transparent; font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; padding: .4rem .1rem; margin-bottom: 1rem; outline: none; color: inherit; } .cms-title:focus { border-bottom-color: var(--xy-primary); } .rte { background: #fff; border: 1px solid var(--xy-line, #e4e4e0); border-radius: 16px; overflow: hidden; } .rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: .5rem .6rem; border-bottom: 1px solid var(--xy-line, #e4e4e0); background: #fafaf9; position: sticky; top: 0; z-index: 5; } .rte-bar button { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 8px; color: #3b3f48; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; } .rte-bar button:hover { background: #eceae6; } .rte-bar button.on { background: var(--xy-primary); color: #fff; } .rte-sel { border: 1px solid var(--xy-line, #e4e4e0); border-radius: 8px; height: 34px; padding: 0 .5rem; font-size: .85rem; background: #fff; } .rte-sep { width: 1px; height: 22px; background: var(--xy-line, #e4e4e0); margin: 0 .3rem; } .rte-grow { flex: 1; } .rte-strike { opacity: .55; text-decoration: line-through; } .rte-linkbar { display: none; align-items: center; gap: .5rem; padding: .5rem .75rem; background: #fff7f4; border-bottom: 1px solid var(--xy-line, #e4e4e0); } .rte-linkbar.show { display: flex; } .rte-linkbar input { flex: 1; border: 1px solid var(--xy-line, #e4e4e0); border-radius: 8px; padding: .35rem .6rem; } .rte-area { min-height: 460px; padding: 1.4rem 1.6rem; outline: none; font-size: 1.05rem; } .rte-area:empty::before, .rte-area:has(> p:only-child > br:only-child)::before { content: attr(data-ph); color: #9a9da5; position: absolute; pointer-events: none; } .rte-src { display: none; width: 100%; min-height: 460px; border: 0; padding: 1.2rem 1.4rem; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; outline: none; resize: vertical; } .rte-src-on .rte-src { display: block; } .rte-src-on .rte-area { display: none; } .rte-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .5rem 1rem; border-top: 1px solid var(--xy-line, #e4e4e0); font-size: .78rem; color: var(--xy-muted); background: #fafaf9; } .rte-busy .rte-area { opacity: .55; } .rte-full { position: fixed; inset: 0; z-index: 2000; border-radius: 0; display: flex; flex-direction: column; } .rte-full .rte-area, .rte-full .rte-src { flex: 1; overflow: auto; max-width: 900px; width: 100%; margin: 0 auto; } body.rte-lock { overflow: hidden; } .cms-body img { max-width: 100%; height: auto; border-radius: 12px; } .cms-body figure { margin: 1.2rem 0; text-align: center; } .cms-body figcaption { font-size: .85rem; color: var(--xy-muted); margin-top: .35rem; } .cms-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; } .cms-body th, .cms-body td { border: 1px solid var(--xy-line, #e4e4e0); padding: .5rem .7rem; text-align: left; min-width: 60px; } .cms-body th { background: var(--xy-chip, #f1f1ee); } .cms-body .al-center { text-align: center; } .cms-body .al-right { text-align: right; } .cms-body .al-justify { text-align: justify; } .cms-body .callout { background: #fff4ee; border: 1px solid #f6cdbd; border-left: 4px solid var(--xy-primary); border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0; } .cms-body .callout p { margin: 0; } .cms-body hr { margin: 1.6rem 0; opacity: .25; } .cms-body ul, .cms-body ol { padding-left: 1.4rem; } .cms-body h4 { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .4rem; } .cms-body a { color: var(--xy-primary-dark); } .cms-cover { aspect-ratio: 1200/630; border-radius: 12px; background: var(--xy-chip, #f1f1ee); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--xy-muted); font-size: .85rem; overflow: hidden; } .cms-cover img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; } .cms-cover .bi { font-size: 1.6rem; } .cms-serp { background: #fff; border: 1px solid var(--xy-line, #e4e4e0); border-radius: 12px; padding: .8rem 1rem; max-width: 600px; } .cms-serp .u { font-size: .78rem; color: #4d5156; } .cms-serp .t { font-size: 1.15rem; color: #1a0dab; margin: .1rem 0; } .cms-serp .d { font-size: .85rem; color: #4d5156; } /* Sponsorlu kart */ .bc-ad { margin-left: auto; flex: none; background: #efefef; color: #5f6368; font-size: .72rem; font-weight: 600; padding: .18rem .65rem; border-radius: 999px; } .ad-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; } .ad-kpi > div { background: #fff; border: 1px solid var(--xy-line, #e4e4e0); border-radius: 16px; padding: .8rem 1rem; } .ad-kpi span { display: block; color: var(--xy-muted); font-size: .78rem; } .ad-kpi b { font-size: 1.25rem; } .sp-strip { background: var(--xy-surface, #fff); border: 1px solid var(--bs-border-color); border-radius: 18px; padding: .8rem .9rem; } .sp-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .sp-tag { background: #efefef; color: #5f6368; font-size: .72rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; } .sp-row { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; } .sp-item { flex: 0 0 150px; text-decoration: none; color: inherit; } .sp-img { height: 100px; border-radius: 14px; background: #f3f0ee center/cover; display: grid; place-items: center; font-size: 1.8rem; color: #c9b8b0; } .sp-name { font-weight: 700; font-size: .85rem; margin-top: .4rem; line-height: 1.2; } .sp-biz { font-size: .74rem; color: var(--xy-muted, #6b7280); } .sp-price { font-weight: 800; font-size: .88rem; color: #e8501f; } .bc-star { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #ffe28a, #e0a21c); color: #7a4e00; font-size: .78rem; flex: none; } .bz-star { display: inline-flex; align-items: center; gap: .3rem; background: linear-gradient(135deg, #ffe28a, #e0a21c); color: #6b4300; font-weight: 700; font-size: .78rem; padding: .22rem .65rem; border-radius: 999px; } /* Sipariş ayarları: bilgilendirme kutusu */ .os-warn { display: flex; gap: .75rem; padding: .85rem 1rem; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; font-size: .85rem; } .os-warn > i { font-size: 1.2rem; color: #ea580c; margin-top: .1rem; } .os-warn ul { margin: .35rem 0 0; padding-left: 1.1rem; } html[data-theme="dark"] .os-warn { background: #2a1a10; border-color: #5b3315; color: #fdba74; } /* İşletme ayarları: premium sekmeler */ .st-tabs { display: flex; gap: .35rem; padding: .35rem; margin: 0 0 1rem; background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow-x: auto; scrollbar-width: none; } .st-tabs::-webkit-scrollbar { display: none; } .st-tab { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: transparent; color: #5b6575; font-weight: 600; font-size: .9rem; padding: .6rem 1rem; border-radius: 12px; white-space: nowrap; transition: background .15s, color .15s; } .st-tab i { font-size: 1.05rem; } .st-tab:hover { background: #f3f5f9; color: #1f2937; } .st-tab.active { background: linear-gradient(135deg, #ff5a1f, #ff8a3d); color: #fff; box-shadow: 0 4px 12px rgba(255,90,31,.28); } .st-pane-in { max-width: 1100px; padding-bottom: 5rem; } .st-pane-in .hours-card { max-width: 720px; } .st-hero { margin-bottom: 1rem; } .tb-branch { display: inline-flex; flex-direction: column; line-height: 1.1; text-align: left; } .tb-branch small { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; } .tb-branch b { font-size: .82rem; font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme="dark"] .st-tabs { background: #1b2230; border-color: #2a3345; } html[data-theme="dark"] .st-tab { color: #9ba4b4; } html[data-theme="dark"] .st-tab:hover { background: #232c3d; color: #e5e9f0; } /* Ödemeler: ekstre kartları */ .sl-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 .9rem; } .sl-filters { display: flex; gap: .4rem; flex-wrap: wrap; } .sl-f { display: inline-flex; gap: .5rem; align-items: center; padding: .45rem .9rem; border-radius: 999px; background: #fff; border: 1px solid #e6e9ef; color: #4b5563; font-weight: 600; font-size: .86rem; text-decoration: none; } .sl-f em { font-style: normal; background: #f1f3f7; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; color: #6b7280; } .sl-f.on { background: #111827; color: #fff; border-color: #111827; } .sl-f.on em { background: rgba(255,255,255,.18); color: #fff; } .sl-card { background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; padding: 1rem 1.2rem; margin-bottom: .8rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); border-left: 4px solid #f59e0b; } .sl-card.st-paid { border-left-color: #16a34a; } .sl-card.st-carried { border-left-color: #9ca3af; } .sl-main { display: grid; grid-template-columns: minmax(200px, 1.2fr) 2fr minmax(180px, 1fr); gap: 1rem; align-items: center; } .sl-per { display: flex; gap: .75rem; align-items: center; } .sl-per strong { display: block; } .sl-per small, .sl-brk small, .sl-net small { display: block; color: #8a93a3; font-size: .74rem; } .sl-cal { width: 42px; height: 42px; border-radius: 12px; background: #fff1e8; color: #ff5a1f; display: grid; place-items: center; font-size: 1.2rem; } .sl-brk { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .sl-brk b { font-size: .95rem; } .sl-net { text-align: right; } .sl-net b { display: block; font-size: 1.35rem; line-height: 1.2; } .sl-net b.neg { color: #dc2626; } .sl-chip { display: inline-flex; gap: .35rem; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; margin-top: .3rem; } .sl-chip.ok { background: #dcfce7; color: #166534; } .sl-chip.warn { background: #fef3c7; color: #92400e; } .sl-chip.gray { background: #f1f3f7; color: #4b5563; } .sl-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .9rem 0 .2rem; padding: 0; } .sl-steps li { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .74rem; color: #9ca3af; position: relative; text-align: center; } .sl-steps li i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f1f3f7; font-size: .9rem; position: relative; z-index: 1; } .sl-steps li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: #e5e7eb; } .sl-steps li:first-child::before { display: none; } .sl-steps li.done { color: #166534; } .sl-steps li.done i { background: #16a34a; color: #fff; } .sl-steps li.done::before { background: #16a34a; } .sl-steps li.cur { color: #92400e; } .sl-steps li.cur i { background: #fde68a; color: #92400e; } .sl-steps li.bad { color: #b91c1c; } .sl-steps li.bad i { background: #fee2e2; color: #b91c1c; } .sl-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed #e6e9ef; flex-wrap: wrap; } .sl-todo { color: #b45309; font-size: .85rem; font-weight: 600; } .sl-acts { display: flex; gap: .4rem; } .sl-btn { display: inline-flex; gap: .4rem; align-items: center; background: #111827; color: #fff; border-radius: 10px; padding: .45rem .9rem; font-size: .85rem; font-weight: 600; text-decoration: none; } .sl-btn.ghost { background: #f1f3f7; color: #374151; } .sl-empty { text-align: center; padding: 2.5rem 1rem; color: #8a93a3; background: #fff; border: 1px dashed #d8dde6; border-radius: 16px; display: grid; gap: .3rem; justify-items: center; } .sl-empty i { font-size: 2rem; } @media (max-width: 768px) { .sl-main { grid-template-columns: 1fr; } .sl-net { text-align: left; } } html[data-theme="dark"] :is(.sl-card, .sl-f, .sl-empty) { background: #1b2230; border-color: #2a3345; color: #e5e9f0; } html[data-theme="dark"] .sl-btn.ghost { background: #2a3345; color: #e5e9f0; } /* Vitrin banner satın alma */ .bn-quote { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; background: #f8fafc; border: 1px solid #e6e9ef; border-radius: 12px; padding: .8rem 1rem; } .bn-quote small { display: block; color: #8a93a3; font-size: .74rem; } .bn-quote b { font-size: 1.05rem; } .bn-quote .tot b { color: #e8501f; font-size: 1.25rem; } .bn-mock { border: 1px solid #e6e9ef; border-radius: 12px; overflow: hidden; background: #fff; } .bn-mock-bar { display: flex; gap: 4px; padding: .4rem .6rem; background: #f1f3f7; } .bn-mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: #cbd2dc; } .bn-mock-hero { height: 54px; background: linear-gradient(135deg, #111827, #374151); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .bn-mock-strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; padding: 8px; } .bn-mock-img { aspect-ratio: 3 / 1; border-radius: 8px; background: #fff1e8 center / cover; display: grid; place-items: center; color: #ff5a1f; font-size: .72rem; border: 2px solid #ff5a1f; } .bn-mock-img.has span { display: none; } .bn-mock-other { aspect-ratio: 3 / 1; border-radius: 8px; background: #eef1f6; } /* Konum seçici */ .hd-loc { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid #e6e9ef; background: #fff; border-radius: 999px; padding: .35rem .8rem; margin-left: .75rem; color: #111827; max-width: 230px; } .hd-loc > .bi-geo-alt-fill { color: #ff5a1f; } .hd-loc .bi-chevron-down { font-size: .7rem; opacity: .6; } .hd-loc-t { display: flex; flex-direction: column; line-height: 1.1; text-align: left; min-width: 0; } .hd-loc-t small { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: #8a93a3; } .hd-loc-t b { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 575px) { .hd-loc { margin-left: .4rem; max-width: 150px; } .hd-loc-t small { display: none; } } .loc-modal { border-radius: 20px; border: 0; } .loc-search { display: flex; align-items: center; gap: .6rem; background: #f3f5f9; border-radius: 14px; padding: .65rem .9rem; } .loc-search input { border: 0; background: transparent; flex: 1; outline: 0; } .loc-spin { width: 16px; height: 16px; border: 2px solid #d1d5db; border-top-color: #ff5a1f; border-radius: 50%; animation: locspin .7s linear infinite; } @keyframes locspin { to { transform: rotate(360deg); } } .loc-results, .loc-list { display: grid; gap: .25rem; margin-top: .5rem; } .loc-item { display: flex; gap: .7rem; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; padding: .6rem .5rem; border-radius: 12px; } .loc-item:hover { background: #f3f5f9; } .loc-item > i { color: #ff5a1f; font-size: 1.1rem; } .loc-item strong { display: block; font-size: .9rem; } .loc-item small { display: block; color: #8a93a3; font-size: .76rem; } .loc-none { padding: .7rem .5rem; color: #8a93a3; font-size: .85rem; } .loc-geo { display: flex; align-items: center; gap: .8rem; width: 100%; margin-top: .75rem; padding: .75rem; border: 1px dashed #ffb48f; background: #fff7f2; border-radius: 14px; text-align: left; } .loc-geo-ico { width: 38px; height: 38px; border-radius: 50%; background: #ff5a1f; color: #fff; display: grid; place-items: center; } .loc-geo strong { display: block; } .loc-geo small { color: #8a93a3; } .loc-h { margin: 1rem 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #8a93a3; font-weight: 700; } /* Ana sayfa: yatay vitrinler */ .rail { position: relative; } .rail-track { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: .2rem .1rem .6rem; } .rail-track::-webkit-scrollbar { display: none; } .rail-track > [data-biz] { flex: 0 0 calc((100% - 1.8rem) / 3); min-width: 340px; max-width: 480px; padding: 0; scroll-snap-align: start; } .rail-btn { position: absolute; top: 38%; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: grid; place-items: center; } .rail-btn.prev { left: -14px; } .rail-btn.next { right: -14px; } .rail-btn.off { opacity: 0; pointer-events: none; } @media (max-width: 767px) { .rail-btn { display: none; } .rail-track > [data-biz] { flex-basis: 78%; } } .rail-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; } .rail-head h2 { font-size: 1.3rem; font-weight: 800; margin: 0; } .rail-head h2 small { font-size: .78rem; font-weight: 500; color: #8a93a3; margin-left: .5rem; } .rail-all { background: #f1f3f7; color: #374151; border-radius: 999px; padding: .25rem .9rem; font-size: .82rem; font-weight: 600; text-decoration: none; } .hm-star .rail-head h2 > .bi-award-fill { color: #f59e0b; } .rail-banners { gap: 1rem; } .hm-banner { flex: 0 0 clamp(300px, 38%, 480px); aspect-ratio: 3 / 1; border-radius: 18px; overflow: hidden; position: relative; scroll-snap-align: start; display: block; background: #eef1f6; } .hm-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .hm-banner:hover img { transform: scale(1.03); } .hm-ad { position: absolute; right: 10px; bottom: 8px; z-index: 4; background: rgba(17,24,39,.72); color: #fff; font-size: .66rem; padding: .1rem .5rem; border-radius: 999px; } .hm-camp { display: flex; flex-direction: column; justify-content: space-between; padding: 1.1rem 1.3rem; color: #fff; text-decoration: none; background: #d9381e; } .hm-camp.c1 { background: #0e7a52; } .hm-camp.c2 { background: #0f4f6b; } .hm-camp strong { font-size: 1.15rem; line-height: 1.2; } .hm-cats { gap: .7rem; } .hm-cat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 92px; text-decoration: none; color: #111827; } .hm-cat span { width: 72px; height: 72px; border-radius: 20px; background: #fff; border: 1px solid #eceff4; display: grid; place-items: center; font-size: 1.8rem; color: #ff5a1f; transition: transform .15s, box-shadow .15s; } .hm-cat:hover span { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(255,90,31,.18); } .hm-cat b { font-size: .8rem; font-weight: 600; text-align: center; } .hm-empty { display: flex; gap: 1rem; align-items: center; background: #fff7f2; border: 1px dashed #ffb48f; border-radius: 16px; padding: 1.1rem 1.3rem; } .hm-empty > i { font-size: 1.8rem; color: #ff5a1f; } .hm-empty div { flex: 1; } .hm-empty strong, .hm-empty span { display: block; } .hm-empty span { color: #8a93a3; font-size: .85rem; } html[data-theme="dark"] :is(.hd-loc, .rail-btn, .hm-cat span, .bn-mock, .loc-modal) { background: #1b2230; border-color: #2a3345; color: #e5e9f0; } html[data-theme="dark"] :is(.loc-search, .rail-all, .bn-quote) { background: #232c3d; border-color: #2a3345; color: #e5e9f0; } html[data-theme="dark"] .hm-cat { color: #e5e9f0; } .closed-banner.area { background: #fff8db; border-color: #f5d76e; color: #6b5300; display: flex; align-items: center; gap: .8rem; } .closed-banner.area > i { color: #d4a000; } /* Vitrin banner şablonları (tasarım merkezi) */ .bnr { display: block; position: relative; overflow: hidden; container-type: inline-size; color: #fff; text-decoration: none; background: linear-gradient(120deg, var(--c1), var(--c2)); } .bnr::before { content: ""; position: absolute; right: -8cqw; top: -14cqw; width: 34cqw; height: 34cqw; border-radius: 50%; background: rgba(255,255,255,.12); } .bnr-img { position: absolute; background: center / cover no-repeat; } .bnr-txt { position: absolute; left: 5cqw; top: 0; bottom: 0; width: 58%; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; z-index: 2; } .bnr-h { font-size: 5.4cqw; line-height: 1.08; font-weight: 800; letter-spacing: -.01em; } .bnr-s { font-size: 2.7cqw; opacity: .92; line-height: 1.25; } .bnr-cta { font-style: normal; align-self: flex-start; background: #fff; color: #111827; border-radius: 999px; padding: .9cqw 2.6cqw; font-size: 2.4cqw; font-weight: 700; margin-top: 1cqw; } .bnr-badge { position: absolute; z-index: 3; right: 4cqw; top: 4cqw; background: #fff; color: var(--c1); font-weight: 800; font-size: 3cqw; padding: .8cqw 2.4cqw; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.18); } .bnr.t1 .bnr-img { right: 0; top: 0; bottom: 0; width: 42%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); } .bnr.t2 .bnr-img { inset: 0; } .bnr.t2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.05) 70%); z-index: 1; } .bnr.t2::before { display: none; } .bnr.t2 { background: #1f2937; } .bnr.t3 .bnr-txt { left: 27cqw; width: 42%; } .bnr.t3 .bnr-badge { right: auto; left: 5cqw; top: 50%; transform: translateY(-50%) rotate(-8deg); width: 19cqw; height: 19cqw; border-radius: 50%; display: grid; place-items: center; font-size: 5.6cqw; padding: 0; text-align: center; line-height: 1; } .bnr.t3 .bnr-img { right: 0; top: 0; bottom: 0; width: 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); } .bnr.t4 { background: var(--c1); } .bnr.t4::before { display: none; } .bnr.t4 .bnr-img { right: 0; top: 0; bottom: 0; width: 48%; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } .bnr.t4 .bnr-txt { width: 48%; } .bnr.t4 .bnr-badge { right: auto; left: 5cqw; top: 4cqw; background: var(--c2); color: #111; } .bnr.t5 { background: #0b1020; } .bnr.t5::before { background: radial-gradient(circle, var(--c2), transparent 70%); opacity: .35; } .bnr.t5 .bnr-h { background: linear-gradient(90deg, #fff, var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .bnr.t5 .bnr-cta { background: transparent; color: var(--c2); border: .3cqw solid var(--c2); } .bnr.t5 .bnr-img { right: 0; top: 0; bottom: 0; width: 40%; opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); } .bnr.t6 { background: #fff7ed; color: #1f2937; border: 1px solid #fde3c8; } .bnr.t6::before { background: var(--c2); opacity: .22; } .bnr.t6 .bnr-cta { background: var(--c1); color: #fff; } .bnr.t6 .bnr-badge { background: var(--c1); color: #fff; } .bnr.t6 .bnr-img { right: 3cqw; top: 8%; bottom: 8%; width: 30%; border-radius: 14px; } .bn-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .bn-tpl { position: relative; border: 2px solid #e6e9ef; border-radius: 12px; padding: .5rem; cursor: pointer; text-align: center; font-size: .78rem; font-weight: 600; } .bn-tpl input { position: absolute; opacity: 0; } .bn-tpl:has(input:checked) { border-color: #ff5a1f; background: #fff7f2; } .bn-tpl .bnr { border-radius: 8px; margin-bottom: .3rem; aspect-ratio: 3 / 1; pointer-events: none; } .bn-pal { display: flex; gap: .5rem; flex-wrap: wrap; } .bn-pal label { cursor: pointer; } .bn-pal input { position: absolute; opacity: 0; } .bn-pal span { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #d1d5db; } .bn-pal input:checked + span { box-shadow: 0 0 0 3px #111827; } .bn-live { border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.12); } /* Keşfet */ .kf-hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.6rem 1.8rem; border-radius: 24px; margin-bottom: 1.2rem; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(255,138,61,.35), transparent 45%), linear-gradient(135deg, #111827, #2b1a14); } .kf-eyebrow { display: inline-flex; gap: .4rem; align-items: center; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff9d66; } .kf-hero h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; margin: .3rem 0; letter-spacing: -.02em; } .kf-hero p { margin: 0; color: #cbd2dc; } .kf-hero p b { color: #fff; } .kf-loc { display: inline-flex; align-items: center; gap: .7rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 16px; padding: .65rem 1rem; text-align: left; } .kf-loc > .bi-geo-alt-fill { color: #ff8a3d; font-size: 1.2rem; } .kf-loc span { display: flex; flex-direction: column; line-height: 1.15; } .kf-loc small { font-size: .68rem; opacity: .7; } .kf-loc b { font-size: .92rem; } .kf-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: #fff; border: 1px solid #e6e9ef; border-radius: 18px; padding: .7rem .9rem; margin-bottom: 1.2rem; box-shadow: 0 2px 8px rgba(16,24,40,.05); position: sticky; top: 140px; z-index: 20; } @media (max-width: 991px) { .kf-bar { position: static; } } .kf-search { display: flex; align-items: center; gap: .5rem; flex: 1 1 260px; background: #f3f5f9; border-radius: 12px; padding: .5rem .8rem; } .kf-search input { border: 0; background: transparent; outline: 0; flex: 1; min-width: 0; } .kf-chips { display: flex; gap: .4rem; flex-wrap: wrap; flex: 2 1 340px; } .kf-chip { margin: 0; cursor: pointer; } .kf-chip input { position: absolute; opacity: 0; } .kf-chip span { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #e1e5ec; border-radius: 999px; padding: .4rem .85rem; font-size: .84rem; font-weight: 600; color: #4b5563; background: #fff; transition: all .15s; } .kf-chip:hover span { border-color: #ff8a3d; } .kf-chip input:checked + span { background: #111827; border-color: #111827; color: #fff; } .kf-chip input:focus-visible + span { outline: 2px solid #ff5a1f; outline-offset: 2px; } .kf-sort { display: flex; align-items: center; gap: .4rem; background: #f3f5f9; border-radius: 12px; padding: .1rem .7rem; } .kf-sort select { border: 0; background: transparent; padding: .45rem .2rem; font-weight: 600; outline: 0; } .kf-ric { color: #ff5a1f; margin-right: .25rem; } html[data-theme="dark"] .kf-bar { background: #1b2230; border-color: #2a3345; } html[data-theme="dark"] :is(.kf-search, .kf-sort) { background: #232c3d; color: #e5e9f0; } html[data-theme="dark"] .kf-chip span { background: #1b2230; border-color: #2a3345; color: #cbd2dc; } .ag-steps { padding-left: 1.2rem; } .ag-steps > li { margin-bottom: .9rem; } .ag-cmd { display: flex; gap: .5rem; align-items: center; background: #111827; color: #e5e9f0; border-radius: 10px; padding: .6rem .8rem; margin-top: .4rem; } .ag-cmd code { color: #86efac; flex: 1; word-break: break-all; } .ag-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-top: .5rem; } .ag-shots figure { margin: 0; border: 1px solid #e6e9ef; border-radius: 12px; overflow: hidden; background: #fff; } .ag-shots img { width: 100%; height: 150px; object-fit: contain; background: #f3f5f9; display: block; } .ag-shots figcaption { padding: .5rem .65rem; font-size: .78rem; color: #4b5563; } /* Dağıtım Merkezi */ .dp-card { background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); } .dp-map-wrap { position: relative; } #dpMap { height: 380px; border-radius: 12px; z-index: 0; } .dp-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; } .dp-head h2 { font-size: 1rem; font-weight: 700; margin: 0; } .dp-tools { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } .dp-find { display: flex; align-items: center; gap: .5rem; background: #f3f5f9; border-radius: 10px; padding: .4rem .7rem; } .dp-find input { border: 0; background: transparent; outline: 0; min-width: 190px; flex: 1; } .dp-table tr { cursor: pointer; } .dp-table tr.is-sel { background: #eff6ff; } .dp-side { position: sticky; top: 80px; } .dp-couriers { max-height: 360px; overflow-y: auto; display: grid; gap: .35rem; } .dp-cr { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; border: 1px solid #e6e9ef; border-radius: 12px; cursor: pointer; margin: 0; } .dp-cr input { display: none; } .dp-cr.on { border-color: #2563eb; background: #eff6ff; } .dp-av { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #111827; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; } .dp-st { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #9ca3af; border: 2px solid #fff; } .dp-st.on { background: #16a34a; } .dp-ci { flex: 1; min-width: 0; } .dp-ci strong, .dp-ci small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-ci small, .dp-cm small { color: #8a93a3; font-size: .75rem; } .dp-cm { text-align: right; } .dp-cm b, .dp-cm small { display: block; font-size: .82rem; } .dp-zone { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; border-bottom: 1px dashed #e6e9ef; } .dp-zone strong, .dp-zone small { display: block; } .dp-zone small { color: #8a93a3; font-size: .76rem; } .dp-zdot { width: 12px; height: 12px; border-radius: 50%; } .live-legend .dp-hot { background: #dc2626; } .live-legend .dp-mid { background: #f59e0b; } .live-legend .dp-low { background: #16a34a; } html[data-theme="dark"] :is(.dp-card, .dp-cr) { background: #1b2230; border-color: #2a3345; } html[data-theme="dark"] .dp-find { background: #232c3d; } html[data-theme="dark"] .dp-cr.on, html[data-theme="dark"] .dp-table tr.is-sel { background: #1e2a44; } .cm-map { height: 280px; border-radius: 14px; margin-bottom: .8rem; z-index: 0; } .live-legend .dp-pool { background: #f97316; } .live-legend .dp-cour { background: #2563eb; } /* Operasyon sohbeti */ .oc-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; height: calc(100vh - 150px); min-height: 520px; } .oc-list, .oc-main { background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; padding: .9rem; overflow: hidden; display: flex; flex-direction: column; } .oc-list #ocThreads { overflow-y: auto; flex: 1; display: grid; gap: .3rem; align-content: start; } .oc-filters { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .6rem; } .oc-f { border: 1px solid #e1e5ec; background: #fff; border-radius: 999px; padding: .25rem .75rem; font-size: .8rem; font-weight: 600; color: #4b5563; } .oc-f.on { background: #111827; color: #fff; border-color: #111827; } .oc-th { display: flex; gap: .6rem; align-items: center; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 12px; padding: .6rem; width: 100%; } .oc-th:hover { background: #f3f5f9; } .oc-th.on { background: #eff6ff; border-color: #bfdbfe; } .oc-th.hi { border-left: 3px solid #dc2626; } .oc-ic { width: 36px; height: 36px; border-radius: 50%; background: #eef2ff; color: #4338ca; display: grid; place-items: center; flex: none; } .oc-ic.acc { background: #fee2e2; color: #dc2626; } .oc-tb { flex: 1; min-width: 0; } .oc-tb strong, .oc-tb small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-tb small { color: #8a93a3; font-size: .76rem; } .oc-lb { color: #6b7280 !important; } .oc-tm { text-align: right; flex: none; } .oc-tm small { display: block; color: #8a93a3; font-size: .72rem; margin-top: .2rem; } .oc-un { font-style: normal; background: #dc2626; color: #fff; border-radius: 999px; font-size: .68rem; padding: 0 .4rem; } .oc-main { padding: 0; } .oc-empty { margin: auto; text-align: center; color: #8a93a3; display: grid; gap: .3rem; justify-items: center; } .oc-empty i { font-size: 2.4rem; } .oc-hd { padding: .9rem 1rem; border-bottom: 1px solid #e6e9ef; display: grid; gap: .5rem; } .oc-hl { display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .oc-score { text-align: center; border-radius: 12px; padding: .3rem .8rem; background: #dcfce7; color: #166534; } .oc-score.warn { background: #fef3c7; color: #92400e; } .oc-score.bad { background: #fee2e2; color: #991b1b; } .oc-score b { display: block; font-size: 1.3rem; line-height: 1.1; } .oc-score small { font-size: .68rem; } .oc-ord { font-size: .85rem; background: #f8fafc; border-radius: 10px; padding: .5rem .7rem; } .oc-acts { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } .oc-sep { width: 1px; height: 22px; background: #e1e5ec; margin: 0 .2rem; } .oc-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: .5rem; align-content: start; background: #f8fafc; } .oc-m { display: flex; } .oc-m.me { justify-content: flex-end; } .oc-m.sys { justify-content: center; } .oc-m.sys span { background: #e5e7eb; color: #4b5563; border-radius: 999px; font-size: .75rem; padding: .2rem .8rem; } .oc-bub { max-width: 72%; border-radius: 14px; padding: .5rem .75rem; background: #fff; border: 1px solid #e6e9ef; } .oc-m.me .oc-bub { background: #2563eb; color: #fff; border-color: #2563eb; } .oc-bub p { margin: 0; word-break: break-word; } .oc-bub em { display: block; font-style: normal; font-size: .68rem; opacity: .6; text-align: right; } .oc-bub small { display: block; font-size: .68rem; opacity: .75; } .oc-bub img { max-width: 260px; max-height: 220px; border-radius: 10px; display: block; margin-bottom: .3rem; } .oc-compose { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid #e6e9ef; align-items: flex-end; } .oc-compose textarea { flex: 1; resize: none; border: 1px solid #e1e5ec; border-radius: 12px; padding: .5rem .8rem; outline: 0; } .oc-attach { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #e1e5ec; display: grid; place-items: center; cursor: pointer; margin: 0; } .oc-attach.has { background: #dcfce7; border-color: #16a34a; } @media (max-width: 991px) { .oc-wrap { grid-template-columns: 1fr; height: auto; } .oc-main { min-height: 520px; } } html[data-theme="dark"] :is(.oc-list, .oc-main, .oc-th.on) { background: #1b2230; border-color: #2a3345; } html[data-theme="dark"] :is(.oc-msgs, .oc-ord) { background: #151b27; } html[data-theme="dark"] .oc-bub { background: #232c3d; border-color: #2a3345; } /* Kurye: operasyon sohbeti */ .cm-msgs { height: 46vh; overflow-y: auto; background: #f3f5f9; border-radius: 12px; padding: .7rem; display: grid; gap: .4rem; align-content: start; margin-bottom: .6rem; } .cm-m { display: flex; } .cm-m.me { justify-content: flex-end; } .cm-m.sys { justify-content: center; } .cm-m.sys span { background: #e5e7eb; border-radius: 999px; font-size: .72rem; padding: .15rem .7rem; color: #4b5563; text-align: center; } .cm-b { max-width: 80%; background: #fff; border-radius: 12px; padding: .45rem .7rem; border: 1px solid #e6e9ef; } .cm-m.me .cm-b { background: #2563eb; color: #fff; border-color: #2563eb; } .cm-b p { margin: 0; word-break: break-word; } .cm-b small { display: block; font-size: .66rem; opacity: .7; } .cm-b em { display: block; font-style: normal; font-size: .64rem; opacity: .6; text-align: right; } .cm-b img { max-width: 100%; max-height: 200px; border-radius: 8px; display: block; margin-bottom: .3rem; } .cm-compose { display: flex; gap: .4rem; align-items: center; } .cm-att { width: 42px; height: 42px; border: 1px solid #d1d5db; border-radius: 10px; display: grid; place-items: center; margin: 0; flex: none; } .courier-nav { overflow-x: auto; } .courier-nav a { flex: 1 0 auto; min-width: 64px; } .dp-tabs { display: flex; gap: .4rem; margin-bottom: .7rem; } .dp-tab { border: 1px solid #e1e5ec; background: #fff; border-radius: 10px; padding: .45rem .9rem; font-weight: 600; font-size: .88rem; color: #4b5563; } .dp-tab.on { background: #111827; border-color: #111827; color: #fff; } .dp-tab.on .badge { background: #fff !important; color: #111827; } .dp-st-sm { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; } .dp-st-sm.on { background: #16a34a; } /* operasyon sohbeti: hazır mesajlar */ .oc-quick { position: relative; padding: .4rem .7rem 0; border-top: 1px solid #e6e9ef; } .oc-q-toggle { border: 1px solid #d5dbe6; background: #fff; border-radius: 999px; padding: .25rem .75rem; font-size: .82rem; font-weight: 600; color: #2f4bd8; } .oc-q-pop { position: absolute; left: .7rem; right: .7rem; bottom: calc(100% - .2rem); max-height: 55vh; overflow: auto; background: #fff; border: 1px solid #d5dbe6; border-radius: 14px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); padding: .5rem; z-index: 5; } .oc-q-g b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7690; margin: .45rem .4rem .2rem; } .oc-q-i { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: .4rem .5rem; font-size: .85rem; color: #1b2438; } .oc-q-i:hover { background: #eef2ff; } .tb-pill.tb-open.off { border-color: #f0b4b4; background: #fff1f1; color: #9b1c1c; } .tb-pill.tb-open.off .tb-dot { background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .2); } .tb-open-menu { min-width: 290px; } /* ---- İşletme paneli: minimal kurumsal butonlar ---- */ .panel-business .btn { min-height: 34px; padding: .32rem .85rem; font-size: .8125rem; font-weight: 600; border-radius: 8px; letter-spacing: 0; box-shadow: none; } .panel-business .btn-sm { min-height: 28px; padding: .2rem .6rem; font-size: .75rem; border-radius: 7px; } .panel-business .btn-lg, .panel-business .btn-xl { min-height: 38px; padding: .4rem 1rem; font-size: .875rem; border-radius: 8px; } .panel-business .btn i { font-size: .95em; } .panel-business .ph-r .btn, .panel-business .ph-r .btn-primary { border-radius: 8px; padding: .32rem .85rem; background-image: none; box-shadow: none; filter: none; border: 1px solid transparent; } .panel-business .ph-r .btn-primary { background: #D9381E; border-color: #D9381E; } .panel-business .ph-r .btn-outline-secondary, .panel-business .ph-r .btn-outline-dark { border: 1px solid #d6d9e0; background: #fff; } .panel-business form .btn-primary[type=submit]:not(.w-100):not(.btn-block) { width: auto; } .panel-business .d-grid > .btn { min-height: 34px; } /* ---- İşletme dashboard ---- */ .dx-live { display: grid; gap: .6rem; margin-bottom: .8rem; } .dx-lv { display: flex; align-items: baseline; gap: .55rem; padding: .55rem .85rem; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--xy-surface, #fff); color: var(--xy-ink); text-decoration: none; } .dx-lv b { font-size: 1.25rem; font-weight: 700; line-height: 1; } .dx-lv span { font-size: .75rem; color: var(--xy-muted, #6b7280); } .dx-lv.red b { color: #D9381E; } .dx-lv.amber b { color: #b7791f; } .dx-lv.state.on b { color: #0E7A52; } .dx-lv.state.off b { color: #c53030; } .dx-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin-bottom: .8rem; } .dx-k { padding: .7rem .85rem; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--xy-surface, #fff); } .dx-k span { display: block; font-size: .72rem; color: var(--xy-muted, #6b7280); text-transform: uppercase; letter-spacing: .03em; } .dx-k b { display: block; font-size: 1.2rem; font-weight: 700; margin: .1rem 0; } .dx-k em { font-style: normal; font-size: .72rem; color: var(--xy-muted, #6b7280); } .dx-d { font-weight: 700; margin-right: .2rem; } .dx-d.up { color: #0E7A52; } .dx-d.down { color: #c53030; } .dx-card { border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--xy-surface, #fff); padding: .9rem 1rem; } .dx-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; } .dx-h h2 { font-size: .9rem; font-weight: 700; margin: 0; } .dx-h small { color: var(--xy-muted, #6b7280); font-size: .75rem; } .dx-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-height: 330px; overflow: auto; } .dx-tips li { display: flex; gap: .6rem; padding: .55rem .65rem; border-radius: 8px; background: #f6f7f9; border-left: 3px solid #9aa3b2; } .dx-tips li > i { font-size: 1.05rem; margin-top: .1rem; } .dx-tips li b { font-size: .8rem; display: block; } .dx-tips li p { margin: .1rem 0 .2rem; font-size: .75rem; color: #5b6472; } .dx-tips li a { font-size: .75rem; font-weight: 600; text-decoration: none; } .dx-tips li.warn { border-color: #e59b0c; background: #fff8e8; } .dx-tips li.danger { border-color: #e5484d; background: #fff1f1; } .dx-tips li.ok { border-color: #0E7A52; background: #effaf4; } .dx-tips li.info { border-color: #4c8dff; background: #f1f6ff; } .dx-t { width: 100%; font-size: .82rem; } .dx-t th { font-size: .7rem; text-transform: uppercase; color: #6b7280; padding: .35rem .3rem; border-bottom: 1px solid #e6e8ec; } .dx-t td { padding: .45rem .3rem; border-bottom: 1px solid #f0f1f4; } [data-theme=dark] .dx-tips li { background: #1e222b; } [data-theme=dark] .dx-tips li p { color: #9aa3b2; } @media (max-width: 1199px) { .dx-kpis { grid-template-columns: repeat(3, 1fr); } .dx-live { grid-template-columns: repeat(2, 1fr); } } /* ---- İşletme: liste sayfaları (ürünler vb.) ---- */ .pg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; } .pg-head h1 { font-size: 1.15rem; font-weight: 700; margin: 0; } .pg-box { background: var(--xy-surface, #fff); border: 1px solid var(--bs-border-color); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .8rem; } .pg-prop { border-color: #c9b6ff; } .pg-filter { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .pg-filter .form-select { max-width: 320px; flex: 1 1 220px; } .pg-search { position: relative; flex: 2 1 260px; } .pg-search i { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: #8b93a3; } .pg-tabs { display: flex; gap: 1.4rem; padding: .7rem 1rem 0; border-bottom: 1px solid var(--bs-border-color); overflow: auto; } .pg-tabs a { display: flex; flex-direction: column; padding-bottom: .55rem; color: #6b7280; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .pg-tabs a b { font-size: .82rem; color: inherit; } .pg-tabs a small { font-size: .72rem; } .pg-tabs a.on { color: var(--xy-ink, #16181D); border-color: var(--xy-ink, #16181D); } .pg-chips { display: flex; gap: .5rem; flex-wrap: wrap; padding: .8rem 1rem 0; } .pg-chip { font-size: .75rem; font-weight: 600; padding: .25rem .75rem; border: 1px solid #cfd4de; border-radius: 999px; color: #374151; text-decoration: none; } .pg-chip em { font-style: normal; background: #eef0f4; border-radius: 99px; padding: 0 .4rem; margin-left: .2rem; } .pg-chip.on { background: #16181D; color: #fff; border-color: #16181D; } .pg-bar { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; flex-wrap: wrap; } .pg-total { font-size: .8rem; font-weight: 600; background: #f1f2f5; padding: .3rem .6rem; border-radius: 6px; } .pg-per { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; margin: 0; } .pg-per select { width: auto; } .pg-pages { display: flex; gap: .25rem; align-items: center; } .pg-pages a { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: .8rem; font-weight: 600; color: #374151; text-decoration: none; } .pg-pages a.on { background: #16181D; color: #fff; } .pg-t { width: 100%; font-size: .82rem; border-top: 1px solid var(--bs-border-color); } .pg-t th { background: #f7f8fa; padding: .65rem .8rem; font-weight: 700; border-bottom: 1px solid var(--bs-border-color); white-space: nowrap; } .pg-t th a { color: inherit; text-decoration: none; } .pg-t th a i { font-size: .7rem; color: #8b93a3; } .pg-t td { padding: .6rem .8rem; border-bottom: 1px solid #eef0f4; vertical-align: middle; } .pg-t tr.is-off .pg-name, .pg-t tr.is-off td:nth-child(n+4) { opacity: .6; } .pg-img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid #e3e6ec; display: inline-flex; align-items: center; justify-content: center; color: #9aa3b2; background: #f7f8fa; text-decoration: none; } .pg-name { font-weight: 600; color: var(--xy-ink, #16181D); text-decoration: none; } .pg-badge { font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 4px; margin-left: .4rem; } .pg-badge.warn { background: #fff3d6; color: #8a5a00; } .pg-badge.bad { background: #fde2e2; color: #9b1c1c; } .pg-ops { display: inline-flex; align-items: center; gap: .7rem; } .pg-ico { background: none; border: 0; color: #374151; font-size: 1rem; padding: .2rem; } .pg-ico:hover { color: #D9381E; } .pg-sw { display: inline-flex; align-items: center; gap: .45rem; margin: 0; cursor: pointer; font-size: .72rem; font-weight: 700; color: #0E7A52; } .pg-sw input { display: none; } .pg-sw i { width: 38px; height: 20px; border-radius: 99px; background: #c4c9d4; position: relative; transition: .15s; } .pg-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; } .pg-sw input:checked + i { background: #0E7A52; } .pg-sw input:checked + i::after { left: 20px; } .pg-sw input:not(:checked) ~ span { color: #6b7280; } /* ---- İşletme paneli: sade sayfa başlığı ---- */ .panel-business .ph { padding: .6rem .2rem .7rem; margin-bottom: .8rem; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid var(--bs-border-color); } .panel-business .ph-ico { width: 32px; height: 32px; border-radius: 8px; font-size: .95rem; background: #16181D; box-shadow: none; } .panel-business .ph h1 { font-size: 1.05rem; font-weight: 700; } .panel-business .ph p { font-size: .78rem; margin: 0; } .dx-live { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .pg-head { display: none; } .panel-business .pg-head { display: flex; } .pg-head .pg-sub { margin: .1rem 0 0; font-size: .78rem; color: #6b7280; } .pg-ord { display: inline-block; min-width: 28px; text-align: center; font-weight: 700; background: #f1f2f5; border-radius: 6px; padding: .1rem .4rem; } .pg-badge.ok { background: #dcf5e8; color: #0a6b48; } .pg-badge.mute { background: #eceef2; color: #5b6472; } .pg-badge.info { background: #e4eeff; color: #1d4fa8; } .pg-badge { display: inline-block; } .pg-code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: .8rem; background: #f1f2f5; border: 1px dashed #b9bfcc; border-radius: 6px; padding: .15rem .55rem; color: #16181D; } .pg-code i { color: #8b93a3; margin-left: .25rem; } .pg-bar2 { height: 6px; border-radius: 99px; background: #e8eaef; overflow: hidden; margin-bottom: .2rem; } .pg-bar2 i { display: block; height: 100%; background: #D9381E; } .sl-einv { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .9rem; margin-bottom: .8rem; border: 1px solid #f1c27a; border-left: 4px solid #e59b0c; border-radius: 8px; background: #fffaf0; } .sl-einv > i { font-size: 1.3rem; color: #b7791f; } .sl-einv b { font-size: .84rem; } .sl-einv p { margin: .1rem 0 0; font-size: .78rem; color: #5b4a2a; } /* Mutabakat kartları: sade */ .panel-business .sl-card { border-radius: 10px; padding: .75rem 1rem; box-shadow: none; margin-bottom: .6rem; } .panel-business .sl-cal { width: 34px; height: 34px; border-radius: 8px; font-size: 1rem; background: #f1f2f5; color: #374151; } .panel-business .sl-net b { font-size: 1.1rem; } .panel-business .sl-brk b { font-size: .86rem; } .panel-business .sl-steps { margin: .6rem 0 0; } .panel-business .sl-steps li i { width: 24px; height: 24px; font-size: .75rem; } .panel-business .sl-steps li::before { top: 12px; } .panel-business .sl-steps li { font-size: .7rem; } .panel-business .sl-btn { border-radius: 8px; padding: .3rem .7rem; font-size: .78rem; } .panel-business .sl-f { padding: .25rem .7rem; font-size: .78rem; } .panel-business .sl-foot { margin-top: .5rem; padding-top: .5rem; } /* ---- İşletme ayarları: görsel alanları yan yana + kırpma ---- */ .img-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .img-slots .img-slot-wide { grid-column: 1 / -1; } .img-slots .img-prev-list { width: 100%; max-width: 419px; } @media (max-width: 767px) { .img-slots { grid-template-columns: 1fr; } } .crop-stage { position: relative; overflow: hidden; background: #111; border-radius: 8px; touch-action: none; cursor: grab; user-select: none; } .crop-stage:active { cursor: grabbing; } .crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; } .crop-frame { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); pointer-events: none; } .crop-ctl { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .3rem; } .crop-ctl input { flex: 1; } /* ---- İşletme: Hesap ayarları, premium dokunuşlar ---- */ .panel-business .acc-hero { padding: 1.1rem 1.4rem; border-radius: 14px; background: linear-gradient(120deg, #ffffff 0%, #fbf7f5 100%); border: 1px solid var(--xy-line-panel); box-shadow: 0 1px 2px rgba(20, 24, 36, .04); } .panel-business .acc-hero h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } .panel-business .acc-logo { width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(135deg, #ff7a52, #D9381E); color: #fff; box-shadow: 0 6px 16px rgba(217, 56, 30, .22); } .panel-business .acc-tabs-wrap { position: sticky; top: 64px; z-index: 5; border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 24, 36, .04); } .panel-business .acc-tabs .nav-link { font-size: .82rem; padding: .85rem .85rem .7rem; gap: .4rem; } .panel-business .acc-tabs .nav-link i { font-size: .95rem; opacity: .75; } .panel-business .acc-card { border-radius: 12px; padding: 0; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 24, 36, .03); } .panel-business .acc-card > *:not(.acc-head) { margin-left: 1.25rem; margin-right: 1.25rem; } .panel-business .acc-card > *:last-child { margin-bottom: 1.25rem; } .panel-business .acc-head { margin: 0 0 1rem; padding: .85rem 1.25rem; background: #fafbfc; border-bottom: 1px solid var(--xy-line-panel); } .panel-business .acc-head h2 { font-size: .92rem; font-weight: 700; gap: .6rem; } .panel-business .acc-head h2 i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid #e6e8ec; color: #D9381E; font-size: .9rem; } .panel-business .acc .form-label, .panel-business .acc label.form-label { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; margin-bottom: .3rem; } .panel-business .acc .form-control, .panel-business .acc .form-select { min-height: 38px; border-radius: 8px; font-size: .85rem; border-color: #d9dce3; } .panel-business .acc .form-control:focus, .panel-business .acc .form-select:focus { border-color: #D9381E; box-shadow: 0 0 0 3px rgba(217, 56, 30, .12); } .panel-business .acc .row { --bs-gutter-x: 1rem; --bs-gutter-y: .9rem; } .panel-business .acc-alert { border-radius: 8px; padding: .6rem .8rem; font-size: .8rem; } .panel-business .acc-table th { background: #fafbfc; } .panel-business .acc .tab-content > .tab-pane { padding-top: .1rem; } /* ---- Bildirim (toast) ---- */ #xyToasts { position: fixed; top: 76px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: .6rem; width: min(380px, calc(100vw - 32px)); pointer-events: none; } .xyt { --c: #2563eb; --cs: #eaf1ff; position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .9rem .9rem; background: #fff; border: 1px solid #e3e6ec; border-left: 3px solid var(--c); border-radius: 10px; box-shadow: 0 10px 28px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06); pointer-events: auto; animation: xytIn .28s cubic-bezier(.2, .8, .2, 1); } .xyt.out { animation: xytOut .22s ease forwards; } .xyt-success { --c: #0E7A52; --cs: #e4f6ee; } .xyt-error { --c: #D9381E; --cs: #fdeceb; } .xyt-warning { --c: #c27a06; --cs: #fff3d9; } .xyt-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--cs); color: var(--c); font-size: 1rem; } .xyt-tx { flex: 1; min-width: 0; line-height: 1.35; } .xyt-tx b { display: block; font-size: .8rem; font-weight: 700; color: #16181D; } .xyt-tx span { display: block; font-size: .8rem; color: #4b5563; word-break: break-word; } .xyt-x { flex: none; border: 0; background: none; color: #8b93a3; font-size: 1.1rem; line-height: 1; padding: 0; } .xyt-x:hover { color: #16181D; } .xyt-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); opacity: .35; transform-origin: left; animation: xytBar linear forwards; } .xyt.paused .xyt-bar { animation-play-state: paused; } @keyframes xytIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes xytOut { to { opacity: 0; transform: translateX(24px); } } @keyframes xytBar { from { transform: scaleX(1); } to { transform: scaleX(0); } } [data-theme=dark] .xyt { background: #1e232d; border-color: #2b313d; } [data-theme=dark] .xyt-tx b { color: #f1f3f7; } [data-theme=dark] .xyt-tx span { color: #aab2c0; } @media (max-width: 575px) { #xyToasts { top: 64px; right: 16px; } } .panel-admin .pg-head { display: flex; } /* Marka galerisi */ .br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .8rem; } .br-card { background: var(--xy-surface, #fff); border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .br-card.is-off { opacity: .6; } .br-img { aspect-ratio: 1; background: #f7f8fa center / contain no-repeat; display: grid; place-items: center; color: #b4bac6; font-size: 2rem; border-bottom: 1px solid #eef0f4; } .br-body { padding: .6rem .7rem; flex: 1; } .br-body b { display: block; font-size: .85rem; } .br-body small { color: #6b7280; font-size: .72rem; } .br-foot { display: flex; align-items: center; justify-content: space-between; padding: .4rem .7rem .6rem; } .br-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; max-height: 260px; overflow: auto; padding: .2rem; } .br-opt { border: 1.5px solid #e3e6ec; border-radius: 8px; background: #fff; padding: .3rem; text-align: center; cursor: pointer; font-size: .7rem; font-weight: 600; line-height: 1.2; } .br-opt .br-t { aspect-ratio: 1; background: #f7f8fa center / contain no-repeat; border-radius: 6px; margin-bottom: .25rem; display: grid; place-items: center; color: #b4bac6; } .br-opt:hover { border-color: #b9bfcc; } .br-opt.on { border-color: #D9381E; box-shadow: 0 0 0 3px rgba(217, 56, 30, .12); } /* ---- Ürün formu ---- */ .pf-card { background: var(--xy-surface, #fff); border: 1px solid var(--bs-border-color); border-radius: 12px; margin-bottom: .9rem; overflow: hidden; } .pf-h { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; background: #fafbfc; border-bottom: 1px solid var(--bs-border-color); } .pf-h > i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid #e6e8ec; color: #D9381E; font-size: .9rem; } .pf-h h2 { margin: 0; font-size: .9rem; font-weight: 700; } .pf-h h2 small { font-weight: 500; color: #8b93a3; font-size: .72rem; margin-left: .4rem; } .pf-b { padding: 1rem 1.1rem; } .pf-b .form-label { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; margin-bottom: .3rem; } .pf-b .form-control, .pf-b .form-select { min-height: 38px; border-radius: 8px; font-size: .86rem; } .pf-b textarea.form-control { min-height: 84px; } .pf-side { position: sticky; top: 76px; } .pf-brand { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .3rem .6rem; min-height: 38px; background: #fff; border: 1px solid #ced4da; border-radius: 8px; text-align: left; font-size: .86rem; color: #6b7280; } .pf-brand .pf-bn { flex: 1; } .pf-brand .pf-bn.is-set { color: #16181D; font-weight: 600; } .pf-bt { width: 26px; height: 26px; border-radius: 6px; background: #f1f2f5 center / contain no-repeat; } .pf-bt.empty { display: none; } .pf-brandpanel { position: absolute; z-index: 20; width: min(440px, 92vw); margin-top: .3rem; padding: .6rem; background: #fff; border: 1px solid #d6d9e0; border-radius: 10px; box-shadow: 0 14px 34px rgba(16, 24, 40, .16); } .pf-prev { min-height: 38px; display: flex; align-items: center; gap: .4rem; padding: 0 .75rem; background: #f7f8fa; border: 1px dashed #d6d9e0; border-radius: 8px; } .pf-prev s { color: #8b93a3; font-size: .8rem; } .pf-prev b { color: #0E7A52; } .pf-disc { margin-left: auto; font-size: .7rem; font-weight: 700; background: #dcf5e8; color: #0a6b48; padding: .15rem .5rem; border-radius: 99px; } .pf-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .6rem; } .pf-gallery:empty { display: none; } .pf-img { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid #e3e6ec; background: #f7f8fa; } .pf-img img { width: 100%; height: 100%; object-fit: cover; } .pf-img.is-brand img { object-fit: contain; } .pf-img.is-deleted { opacity: .35; } .pf-tag { position: absolute; left: 4px; bottom: 4px; font-size: .6rem; font-weight: 700; background: rgba(22, 24, 29, .78); color: #fff; padding: .05rem .4rem; border-radius: 4px; } .pf-del { position: absolute; top: 4px; right: 4px; margin: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, .92); color: #c53030; cursor: pointer; font-size: .8rem; } .pf-del input { display: none; } .pf-del:has(input:checked) { background: #c53030; color: #fff; } .pf-drop { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: 1rem; border: 1.5px dashed #c4c9d4; border-radius: 10px; background: #fafbfc; cursor: pointer; text-align: center; margin: 0; } .pf-drop i { font-size: 1.5rem; color: #8b93a3; } .pf-drop b { font-size: .82rem; } .pf-drop span { font-size: .72rem; color: #6b7280; } .pf-drop:hover, .pf-drop.on { border-color: #D9381E; background: #fff6f3; } #variants .var-row, #groups .opt-row { align-items: center; } #groups .grp-row { background: #fafbfc; border-color: #e3e6ec !important; border-radius: 10px !important; } /* ---- Otomatik yazdırma: premium kart ---- */ .pr-card { padding: 0; overflow: hidden; border: 1px solid var(--bs-border-color); box-shadow: 0 1px 2px rgba(20, 24, 36, .04); border-radius: 14px; } .pr-top { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.3rem; background: linear-gradient(120deg, #faf7ff 0%, #fff 70%); border-bottom: 1px solid var(--bs-border-color); } .pr-top h2 { margin: 0; font-size: 1.02rem; font-weight: 700; } .pr-top p { margin: .1rem 0 0; font-size: .8rem; color: #6b7280; max-width: 560px; } .pr-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: 99px; font-size: .75rem; font-weight: 700; background: #f1f2f5; color: #5b6472; border: 1px solid #e3e6ec; } .pr-pill i { width: 8px; height: 8px; border-radius: 50%; background: #aab1be; } .pr-pill.on { background: #e4f6ee; color: #0a6b48; border-color: #bfe6d3; } .pr-pill.on i { background: #0E7A52; box-shadow: 0 0 0 3px rgba(14, 122, 82, .18); } .pr-sec { padding: 1.1rem 1.3rem; border-bottom: 1px solid #eef0f4; } .pr-sh { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; } .pr-sh b { display: block; font-size: .88rem; } .pr-sh small { color: #6b7280; font-size: .75rem; } .pr-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: #16181D; color: #fff; } .pr-toggle { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid #e3e6ec; border-radius: 10px; background: #fafbfc; margin: 0; cursor: pointer; } .pr-toggle .form-check-input { flex: none; width: 2.6em; height: 1.4em; margin-top: .1rem; } .pr-toggle:has(input:checked) { border-color: #bfe6d3; background: #f3fbf7; } .pr-toggle strong { display: block; font-size: .86rem; } .pr-toggle small { display: block; color: #6b7280; font-size: .76rem; margin-top: .1rem; } .pr-card .os-lbl i { margin-right: .25rem; color: #8b93a3; } .pr-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; margin-bottom: .9rem; } .pr-way { position: relative; padding: .85rem 1rem; border: 1px solid #e3e6ec; border-radius: 10px; background: #fff; } .pr-way > i { font-size: 1.2rem; color: #6a45d6; } .pr-way b { display: block; font-size: .84rem; margin: .2rem 0; } .pr-way small { display: block; font-size: .74rem; color: #6b7280; line-height: 1.4; } .pr-way.rec { border-color: #cdbdf5; background: linear-gradient(180deg, #faf7ff, #fff); } .pr-rec { position: absolute; top: .6rem; right: .7rem; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #6a45d6; color: #fff; padding: .1rem .5rem; border-radius: 99px; } .pr-card .os-agent { border: 1px dashed #d6d9e0; border-radius: 10px; padding: 1rem; background: #fcfcfd; } .pr-act { padding: 1rem 1.3rem 0; margin: 0; } .pr-card > .os-det { margin: .9rem 1.3rem 1.1rem; } .pr-support { display: grid; grid-template-columns: 1fr auto; gap: 1.4rem; align-items: center; padding: 1.3rem 1.4rem; color: #fff; background: radial-gradient(500px 200px at 95% -20%, rgba(255, 120, 80, .35), transparent 70%), linear-gradient(135deg, #16181D 0%, #261a2e 100%); } .pr-sp-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffb59f; } .pr-support h3 { margin: .35rem 0 .3rem; font-size: 1.15rem; font-weight: 700; } .pr-support p { margin: 0 0 .6rem; font-size: .8rem; color: #cfc7d8; max-width: 520px; } .pr-support ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .76rem; color: #e6e0ee; } .pr-support li i { color: #4ee0a0; margin-right: .25rem; } .pr-sp-r { text-align: center; min-width: 190px; } .pr-price { display: flex; align-items: baseline; justify-content: center; gap: .15rem; flex-wrap: wrap; } .pr-price b { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .pr-price span { font-size: 1.1rem; font-weight: 700; } .pr-price small { flex-basis: 100%; font-size: .7rem; color: #b9b0c4; margin-top: .2rem; } .pr-cta { margin-top: .8rem; width: 100%; border: 0; border-radius: 8px; padding: .55rem 1rem; font-size: .82rem; font-weight: 700; color: #16181D; background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; } .pr-cta:hover { background: #ffe9e2; } .pr-site { display: block; margin-top: .55rem; font-size: .7rem; color: #b9b0c4; text-decoration: none; } .pr-site:hover { color: #fff; } .pr-open { margin-top: .8rem; font-size: .76rem; padding: .5rem .7rem; border-radius: 8px; background: rgba(255, 255, 255, .1); } .pr-open a { color: #ffb59f; font-weight: 700; } .pr-quote { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; border-radius: 10px; background: #16181D; color: #fff; margin-bottom: .8rem; } .pr-quote span { font-size: .78rem; color: #cfc7d8; } .pr-quote b { font-size: 1.3rem; } @media (max-width: 767px) { .pr-support { grid-template-columns: 1fr; } .pr-top { flex-wrap: wrap; } } .pr-toggle .form-check-input { background-color: #dfe3ea; border-color: #b9bfcc; } .pr-toggle .form-check-input:checked { background-color: #0E7A52; border-color: #0E7A52; } .panel-business .os-save, .panel-business .os-ghost { border-radius: 8px; padding: .4rem .85rem; font-size: .8rem; font-weight: 600; box-shadow: none; } .panel-business .os-save { background: #16181D; color: #fff; } .panel-business .os-ghost { border-width: 1px; } .panel-business .os-card { border-radius: 14px; box-shadow: none; border: 1px solid var(--bs-border-color); } /* ---- Bildirim sesi seçimi: kompakt kafes ---- */ .snd-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; } .snd { position: relative; flex-direction: column; align-items: flex-start; gap: .55rem; padding: .7rem .8rem; border-radius: 10px; border: 1px solid #e3e6ec; background: #fff; margin: 0; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .snd:hover { border-color: #b9bfcc; } .snd.on { border-color: #16181D; background: #fff; box-shadow: 0 0 0 3px rgba(22, 24, 29, .08); } .snd strong { font-size: .78rem; font-weight: 600; color: #16181D; line-height: 1.2; } .snd-n { width: 24px; height: 24px; border-radius: 7px; background: #f1f2f5; color: #5b6472; display: grid; place-items: center; font-size: .72rem; font-weight: 700; } .snd.on .snd-n { background: #16181D; color: #fff; } .snd-play { position: absolute; top: .55rem; right: .55rem; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #d6d9e0; background: #fff; color: #16181D; display: grid; place-items: center; font-size: 1rem; padding: 0; } .snd-play:hover { background: #16181D; color: #fff; border-color: #16181D; } .snd-ck { position: absolute; right: .6rem; bottom: .55rem; color: #0E7A52; font-size: .95rem; opacity: 0; transform: scale(.6); transition: .15s; } .snd.on .snd-ck { opacity: 1; transform: none; } html[data-theme="dark"] .panel-business .snd strong { color: #e9ecf2; } html[data-theme="dark"] .panel-business .snd-play { background: #1e232d; color: #e9ecf2; border-color: #2b313d; } html[data-theme="dark"] .panel-business .snd.on { border-color: #e9ecf2; } /* ---- Yazıcılar (merkez + mutfak) ---- */ .pr-warn { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .8rem; border: 1px solid #f1c27a; border-left: 3px solid #e59b0c; border-radius: 8px; background: #fffaf0; font-size: .76rem; color: #5b4a2a; } .pr-warn i { color: #c27a06; margin-top: .1rem; } .pr-dev { display: grid; grid-template-columns: auto 1fr minmax(180px, 240px); gap: .8rem; align-items: center; padding: .8rem .9rem; border: 1px solid #e3e6ec; border-radius: 10px; background: #fff; } .pr-dev.is-off { background: #fafbfc; } .pr-dev.is-off .pr-dev-i { opacity: .55; } .pr-dev-i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #ede7ff; color: #5b3bb5; font-size: 1.1rem; } .pr-dev-i.k { background: #fff0e2; color: #c2570a; } .pr-dev-t b { display: block; font-size: .84rem; } .pr-dev-t small { display: block; font-size: .73rem; color: #6b7280; margin-top: .1rem; } .pr-lock, .pr-opt { font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 99px; margin-left: .4rem; vertical-align: middle; } .pr-lock { background: #e4f6ee; color: #0a6b48; } .pr-opt { background: #eceef2; color: #5b6472; } .pr-dev-c { display: flex; flex-direction: column; align-items: stretch; } @media (max-width: 767px) { .pr-dev { grid-template-columns: auto 1fr; } .pr-dev select, .pr-dev-c { grid-column: 1 / -1; } } .snd input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } /* ---- Kurulum talebi: ödeme + randevu ---- */ .pr-flow { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 .9rem; } .pr-flow li { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid #e3e6ec; border-radius: 8px; font-size: .76rem; font-weight: 600; color: #8b93a3; } .pr-flow li b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #eef0f4; font-size: .7rem; } .pr-flow li.on { color: #16181D; border-color: #16181D; } .pr-flow li.on b { background: #16181D; color: #fff; } .pr-flow li.ok { color: #0a6b48; border-color: #bfe6d3; background: #f3fbf7; } .pr-flow li.ok b { background: #0E7A52; color: #fff; } .pr-pay { border: 1px solid #e3e6ec; border-radius: 10px; padding: .8rem .9rem; margin-bottom: .7rem; } .pr-pay-h { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; } .pr-pay-h > i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #f1f2f5; color: #16181D; } .pr-pay-h b { display: block; font-size: .84rem; } .pr-pay-h small { color: #6b7280; font-size: .72rem; } .pr-amt { margin-left: auto; font-size: 1.15rem; font-weight: 800; } .pr-kv { display: grid; grid-template-columns: 96px 1fr auto; gap: .6rem; align-items: center; padding: .4rem 0; border-top: 1px dashed #eceef2; font-size: .8rem; } .pr-kv span { color: #6b7280; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } .pr-kv b { word-break: break-word; font-weight: 600; } .pr-cta.sm { margin-top: .5rem; padding: .35rem .7rem; font-size: .74rem; } .pr-open .pr-st { margin-top: .25rem; font-weight: 600; color: #fff; } .pr-pay.ok { border-color: #bfe6d3; background: #f3fbf7; } .pr-pay.ok .pr-pay-h > i { background: #0E7A52; color: #fff; } .pr-appt { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; margin: 0 0 .5rem; border-radius: 8px; background: #fff; border: 1px solid #bfe6d3; font-size: .95rem; } .pr-appt i { color: #0E7A52; font-size: 1.1rem; } /* Ödeme sayfası kuponları */ .co-cp{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border:1px dashed var(--bs-border-color);border-radius:.7rem;margin-bottom:.45rem} .co-cp.on{border-style:solid;border-color:#198754;background:rgba(25,135,84,.07)} .co-cp.off{opacity:.65} .co-cp-amt{min-width:3.2rem;text-align:center;font-size:1rem;color:var(--bs-primary,#d6336c)} .co-cp-info{flex:1;display:flex;flex-direction:column;line-height:1.2} .co-cp-info small{color:var(--bs-secondary-color);font-size:.75rem} .co-cp-warn{display:flex;gap:.5rem;align-items:flex-start;padding:.55rem .7rem;margin-bottom:.6rem;border-radius:.7rem;background:rgba(255,193,7,.14);color:#7a5a00;font-size:.8rem;line-height:1.35} .co-cp-warn i{margin-top:.1rem} /* Kurye konum penceresi: detay kartları */ .oc-det{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem;margin-bottom:.8rem} .oc-dc{border:1px solid var(--bs-border-color);border-radius:.7rem;padding:.6rem .75rem;font-size:.8rem} .oc-dc h6{font-size:.78rem;margin:0 0 .4rem;color:var(--bs-secondary-color);text-transform:uppercase;letter-spacing:.03em} .oc-kv{display:flex;justify-content:space-between;gap:.6rem;padding:.12rem 0;border-bottom:1px dashed rgba(0,0,0,.06)} .oc-kv span{color:var(--bs-secondary-color)}.oc-kv b{font-weight:600;text-align:right;word-break:break-word} .oc-dw{grid-column:1/-1} .oc-tl{display:flex;flex-wrap:wrap;gap:.4rem} .oc-tl span{background:var(--bs-tertiary-bg,#f3f4f6);border-radius:.5rem;padding:.25rem .55rem;font-size:.75rem} .oc-tl b{margin-right:.35rem} /* Harita kurye (motosiklet) simgesi */ .xy-rider-wrap{background:transparent;border:0} .xy-rider{display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35);background:#16a34a;transition:transform .15s} .xy-rider.busy{background:#4f46e5} .xy-rider.offline{background:#6b7280} .xy-rider.sel{background:#e11d48;box-shadow:0 0 0 6px rgba(225,29,72,.25),0 4px 14px rgba(0,0,0,.4)} .xy-rider.stale{opacity:.55;filter:grayscale(.35)} .xy-rider:hover{transform:scale(1.1)} /* Yüklenen marka logosu: kutuyu doldurur, renkli zemini kaldırır */ .brand-mark.has-logo, .brand-lockup .brand-mark.has-logo, .sf-logo .brand-mark.has-logo, .panel-admin .brand-mark.has-logo { background: #fff; box-shadow: none; padding: 3px; overflow: hidden; } .brand-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .sf-social a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.08); color: inherit; text-decoration: none; } .sf-social a:hover { background: rgba(255,255,255,.18); } /* ===== Ayarlar sayfası (sx-): kurumsal, sakin, satır tabanlı düzen ===== */ .sx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .sx-head h1 { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; } .sx-head p { margin: .25rem 0 0; max-width: 640px; font-size: .86rem; color: var(--xy-muted); } .sx-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .78rem; color: var(--xy-muted); } .sx-meta span { display: inline-flex; align-items: center; gap: .45rem; } .sx-meta b { color: var(--xy-ink); font-weight: 600; } .sx-dot { width: 7px; height: 7px; border-radius: 50%; background: #c5cad6; flex: none; } .sx-dot.on { background: #1f9d57; } .sx-dot.warn { background: #d98a00; } .sx-wrap { max-width: 980px; } .sx-card { background: var(--xy-surface, #fff); border: 1px solid #e6e9f0; border-radius: 12px; margin-bottom: 1rem; overflow: hidden; } .sx-card-h { padding: 1rem 1.35rem .9rem; border-bottom: 1px solid #edf0f5; } .sx-card-h h2 { margin: 0; display: flex; align-items: center; gap: .55rem; font-size: .95rem; font-weight: 650; letter-spacing: -.005em; } .sx-card-h h2 i { font-size: .98rem; color: #8089a0; } .sx-card-h p { margin: .25rem 0 0; font-size: .8rem; color: var(--xy-muted); line-height: 1.5; } .sx-card-b { padding: 0 1.35rem; } .sx-card-f { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: flex-end; padding: .8rem 1.35rem; background: #fafbfd; border-top: 1px solid #edf0f5; } .sx-card-f .sx-hint { margin-right: auto; font-size: .78rem; color: var(--xy-muted); } .sx-row { display: grid; grid-template-columns: minmax(170px, 4fr) 8fr; gap: .5rem 2rem; padding: 1rem 0; border-bottom: 1px solid #f0f2f7; align-items: start; } .sx-row:last-child { border-bottom: 0; } .sx-lab { margin: 0; font-size: .85rem; font-weight: 600; color: var(--xy-ink); line-height: 1.35; } .sx-lab small { display: block; margin-top: .22rem; font-size: .76rem; font-weight: 400; color: #7d869a; line-height: 1.45; } .sx-ctl .form-control, .sx-ctl .form-select { border-radius: 8px; border: 1px solid #dde1ea; background: #fff; font-size: .88rem; padding: .5rem .75rem; box-shadow: none; } .sx-ctl .form-control:focus, .sx-ctl .form-select:focus { border-color: #4a62c9; box-shadow: 0 0 0 3px rgba(74, 98, 201, .14); } .sx-ctl textarea.form-control { resize: vertical; } .sx-ctl .sx-sub { margin-top: .4rem; font-size: .76rem; color: #7d869a; } .sx-ctl .sx-sub a { color: #3b4fa8; } .sx-ctl .form-control-color { width: 44px; height: 38px; padding: 3px; border-radius: 8px; } .sx-inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .sx-row.sx-switch { align-items: center; } .sx-row.sx-switch .sx-ctl { display: flex; justify-content: flex-end; } .sx-row.sx-switch .form-check-input { width: 2.4em; height: 1.3em; margin: 0; cursor: pointer; } .sx-row.sx-switch .form-check-input:checked { background-color: #4a62c9; border-color: #4a62c9; } .sx-tile { display: inline-flex; align-items: center; gap: .65rem; padding: .45rem .7rem .45rem .45rem; border: 1px solid #e3e6ee; border-radius: 10px; background: #fafbfd; font-size: .8rem; color: var(--xy-muted); } .sx-tile img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid #edf0f5; padding: 2px; } .sx-tile .brand-mark { width: 36px; height: 36px; border-radius: 9px; font-size: .95rem; } .sx-tile b { color: var(--xy-ink); font-weight: 600; } .sx-btn { display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 1.05rem; border-radius: 8px; border: 1px solid transparent; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; } .sx-btn.primary { background: #3f56c4; color: #fff; } .sx-btn.primary:hover { background: #3447ad; } .sx-btn.ghost { background: #fff; color: var(--xy-ink); border-color: #d8dce6; } .sx-btn.ghost:hover { background: #f4f6fa; } .sx-btn[disabled] { opacity: .55; } .sx-btn.sm { height: 32px; padding: 0 .7rem; font-size: .8rem; } .sx-bar { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 0 .4rem; background: linear-gradient(to top, var(--xy-bg, #f5f6fa) 65%, rgba(245, 246, 250, 0)); } .sx-note { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid #e3e8f6; border-radius: 10px; background: #f6f8fd; font-size: .8rem; color: #4a5470; line-height: 1.55; } .sx-note b { color: var(--xy-ink); } .sx-list .sx-li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #f0f2f7; font-size: .83rem; } .sx-list .sx-li:last-child { border-bottom: 0; } .sx-li small { color: #7d869a; } .sx-pill { display: inline-block; padding: .12rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 600; background: #eef0f5; color: #4a5160; } .sx-pill.ok { background: #e6f5ec; color: #17794a; } .sx-pill.err { background: #fdebea; color: #b3281a; } .sx-serp { padding: .85rem 1rem; border: 1px solid #e3e6ee; border-radius: 10px; background: #fff; max-width: 560px; } .sx-serp .u { font-size: .74rem; color: #5f6a82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sx-serp .t { margin: .1rem 0; font-size: 1.05rem; color: #1a0dab; } .sx-serp .d { font-size: .8rem; color: #4d5565; } @media (max-width: 767px) { .sx-row { grid-template-columns: 1fr; gap: .45rem; } .sx-row.sx-switch { grid-template-columns: 1fr auto; } } /* Yüklenen logo: kutuya sıkıştırılmadan, oranı korunarak (yatay ya da kare) gösterilir; yanında ad yazılmaz */ .brand-logo { display: block; height: 40px; width: auto; max-width: 210px; object-fit: contain; } .site-header .brand-logo { height: 42px; max-width: 220px; } .sf-logo .brand-logo { height: 40px; max-width: 220px; } .sidebar-brand .brand-logo { height: 36px; max-width: 190px; } .sidebar-brand a:has(.brand-logo) { display: inline-flex; align-items: center; } .auth-card .brand-logo, .brand-logo.lg { height: 48px; max-width: 240px; } /* Ayarlar: iki sütunlu yerleşim (geniş ekranda alan boş kalmaz) */ .sx-wrap { max-width: none; } .sx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; align-items: start; } .sx-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sx-grid > .sx-col { min-width: 0; } .sx-grid .sx-row { grid-template-columns: minmax(110px, 36%) 1fr; gap: .5rem 1.25rem; } .sx-grid.c3 .sx-row, .sx-grid .sx-row.stack { grid-template-columns: 1fr; } @media (max-width: 1199px) { .sx-grid, .sx-grid.c3 { grid-template-columns: 1fr; } } .sx-prov { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; padding: 1rem 0; } .sx-prov label { display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; border: 1px solid #dde1ea; border-radius: 10px; cursor: pointer; font-size: .85rem; font-weight: 600; background: #fff; } .sx-prov label:has(input:checked) { border-color: #4a62c9; background: #f3f5fd; box-shadow: 0 0 0 3px rgba(74, 98, 201, .1); } .sx-prov input { accent-color: #4a62c9; } .sx-sec { display: none; } .sx-sec.on { display: block; } .sx-card .sx-secret { font-family: inherit; } .sx-logo-prev { display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; border: 1px solid #e3e6ee; border-radius: 10px; background: #fafbfd; min-height: 64px; } .sx-logo-prev .brand-mark { width: 36px; height: 36px; border-radius: 9px; font-size: .95rem; } .sx-logo-prev b { font-weight: 600; } /* Üye doğrulama adımları ve iletişim tercihleri */ .vf-steps { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: .78rem; font-weight: 700; color: var(--xy-muted); } .vf-steps span { padding: .25rem .7rem; border-radius: 99px; background: #eef0f5; } .vf-steps span.on { background: #1a1c22; color: #fff; } .vf-steps span.done { background: #e4f6ee; color: #0e7a52; } .vf-steps i { flex: 1; height: 1px; background: #dde1ea; max-width: 40px; } .vf-note { display: flex; gap: .55rem; padding: .7rem .9rem; margin-bottom: 1rem; border: 1px solid #e3e8f6; border-radius: 10px; background: #f6f8fd; font-size: .8rem; color: #4a5470; } .rg-consent { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid #e6e9f0; border-radius: 12px; background: #fafbfd; } .rg-consent-h { font-size: .8rem; font-weight: 700; margin-bottom: .5rem; } .rg-consent-h small { font-weight: 500; color: var(--xy-muted); } .rg-check { display: flex; gap: .65rem; align-items: flex-start; padding: .45rem 0; cursor: pointer; } .rg-check input { margin-top: .25rem; accent-color: #D9381E; } .rg-check b { display: block; font-size: .84rem; } .rg-check small { display: block; font-size: .76rem; color: var(--xy-muted); } .rg-note { margin: .4rem 0 0; font-size: .72rem; color: #7d869a; } /* İşletme başvurusu: konum arama çubuğu */ .ap-find { display: flex; gap: .5rem; flex-wrap: wrap; } .ap-find-in { position: relative; flex: 1 1 260px; } .ap-find-in > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #8b93a3; pointer-events: none; } .ap-find-in input { padding-left: 2.3rem; } /* Sipariş takibi: "kuryeniz adresinize yaklaştı" şeridi */ .near-banner { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; margin-bottom: 1rem; border: 1px solid #b7e0cc; border-left: 4px solid #0e7a52; border-radius: 14px; background: linear-gradient(90deg, #eaf7f1, #f6fcf9); } .near-banner .nb-ico { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #0e7a52; color: #fff; font-size: 1.3rem; } .near-banner .nb-ico::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(14, 122, 82, .35); animation: nbPulse 1.8s ease-out infinite; } .near-banner strong { display: block; font-size: 1rem; color: #0b5a3c; } .near-banner span:not(.nb-ico) { display: block; font-size: .86rem; color: #3b6b57; margin-top: .1rem; } @keyframes nbPulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .near-banner .nb-ico::after { animation: none; } } /* ---- Sipariş takip kartı: harita + rota üstte, koyu bilgi paneli altta ---- */ .tk { border-radius: 26px; overflow: hidden; margin-bottom: 1.2rem; background: #16181D; box-shadow: 0 24px 44px -28px rgba(0, 0, 0, .65); } .tk-map { position: relative; height: 340px; background: #E9EAEC; } .tk-map #tkMap { position: absolute; inset: 0; height: 100%; background: #E9EAEC; } .tk-map .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.06); } .tk-back { position: absolute; z-index: 500; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 12px; background: #16181D; color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); } .tk-back:hover { color: #fff; background: #000; } .tk-live { position: absolute; z-index: 500; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: #fff; font-size: .78rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); } .tk-live .badge { font-size: .74rem; } .tk .trk-pin.pin-a::before, .tk .trk-pin.pin-b::before { background: #16181D; } .tk-sheet { padding: 1.1rem 1.25rem 1.25rem; color: #fff; } .tk-eta { text-align: center; padding-bottom: .9rem; border-bottom: 1px solid rgba(255, 255, 255, .12); } .tk-eta strong { display: block; font-size: 1.02rem; font-weight: 700; } .tk-eta small { color: rgba(255, 255, 255, .6); font-size: .86rem; } .tk-steps { list-style: none; margin: 0; padding: 1.1rem .25rem; display: flex; align-items: center; justify-content: space-between; } .tk-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; color: rgba(255, 255, 255, .45); } .tk-steps li:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: calc(50% + 26px); right: calc(-50% + 26px); border-top: 2px dotted rgba(255, 255, 255, .28); } .tk-steps li.done:not(:last-child)::after { border-top-color: var(--xy-primary, #D9381E); } .tk-steps span { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.35rem; } .tk-steps li.done { color: var(--xy-primary, #D9381E); } .tk-steps li.now { color: #fff; } .tk-steps li.now span { border-radius: 50%; background: var(--xy-primary, #D9381E); color: #fff; font-size: 1.15rem; box-shadow: 0 0 0 6px rgba(217, 56, 30, .25); animation: tkPulse 1.8s ease-in-out infinite; } .tk-steps small { font-size: .7rem; font-weight: 600; letter-spacing: .01em; } @keyframes tkPulse { 50% { box-shadow: 0 0 0 10px rgba(217, 56, 30, .08); } } .tk-courier { display: flex; align-items: center; gap: .9rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .12); } .tk-av { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 800; font-size: 1.2rem; } .tk-who { flex: 1; min-width: 0; } .tk-who strong { display: block; font-size: 1rem; } .tk-who small { color: rgba(255, 255, 255, .6); } .tk-btn { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #16181D; font-size: 1.15rem; text-decoration: none; } .tk-btn:hover { background: var(--xy-primary, #D9381E); color: #fff; } .tk-on .eta-banner, .tk-on .ac-steps4:not(.ac-steps-pick), .tk-on .track-cta { display: none; } @media (max-width: 575px) { .tk-map { height: 300px; } } /* Dağıtım Merkezi: kuryelerdeki paketler (zengin satır) */ .dp-flow { min-width: 260px; } .dp-fl { display: flex; gap: .55rem; align-items: flex-start; padding: .12rem 0; position: relative; } .dp-fl > div { min-width: 0; } .dp-fl b { display: block; font-size: .86rem; line-height: 1.2; } .dp-fl small { display: block; color: #8a93a3; font-size: .74rem; line-height: 1.25; } .dp-pt { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: .22rem; border: 3px solid #111827; background: #fff; } .dp-pt.b { border-color: #dc2626; background: #dc2626; } .dp-fl + .dp-fl::before { content: ""; position: absolute; left: 5px; top: -.55rem; height: .8rem; border-left: 2px dotted #c3c9d4; } .dp-ph { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: #f1f3f7; color: #4b5563; } .dp-ph.ok { background: #dcfce7; color: #166534; } .dp-ph.info { background: #e0f2fe; color: #075985; } .dp-ph.warn { background: #fef3c7; color: #92400e; } .dp-ph.bad { background: #fee2e2; color: #991b1b; } .dp-eta { color: #374151; font-weight: 600; } .dp-eta.off { color: #9ca3af; font-weight: 500; } .dp-st-sm { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; } .dp-st-sm.on { background: #16a34a; } .dp-quick { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-start; } .dp-qk { border: 1px solid #d5dae3; background: #f8f9fb; border-radius: 999px; padding: .3rem .7rem; font-size: .78rem; cursor: pointer; } .dp-qk:hover { background: #eef2ff; border-color: #2563eb; } html[data-theme="dark"] .dp-ph { background: #263043; color: #cbd5e1; } html[data-theme="dark"] .dp-eta { color: #e5e7eb; } html[data-theme="dark"] .dp-qk { background: #232c3d; border-color: #2a3345; color: #e5e7eb; } .dp-msg { padding: .5rem 0; border-bottom: 1px dashed #e6e9ef; } .dp-msg:last-child { border-bottom: 0; } #dpMsgs { max-height: 320px; overflow-y: auto; } /* Dağıtım Merkezi: bağlantılar, hız/pil rozetleri, ayrıntı çekmecesi */ .dp-lnk { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(37, 99, 235, .5); } .dp-lnk:hover { color: #2563eb; border-bottom-style: solid; } .dp-fl .dp-lnk { display: block; border: 0; } .dp-fl .dp-lnk:hover b { color: #2563eb; } .dp-spd { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: #f1f3f7; color: #4b5563; } .dp-spd.go { background: #dcfce7; color: #166534; } .dp-spd.stop { background: #fef3c7; color: #92400e; } .dp-bat { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: #6b7280; } .dp-bat.low { color: #dc2626; font-weight: 700; } .dp-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1060; width: min(470px, 100%); background: #fff; box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .45); transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; } .dp-drawer.open { transform: none; } .dp-dr-bg { position: fixed; inset: 0; z-index: 1055; background: rgba(15, 23, 42, .25); opacity: 0; pointer-events: none; transition: opacity .2s; } .dp-dr-bg.on { opacity: 1; pointer-events: auto; } .dp-dr-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid #e6e9ef; } .dp-dr-head b { font-size: 1.05rem; margin-right: .5rem; } .dp-dr-x { border: 0; background: #f3f5f9; width: 34px; height: 34px; border-radius: 50%; } .dp-dr-tabs { display: flex; gap: .2rem; padding: .5rem .7rem; border-bottom: 1px solid #e6e9ef; overflow-x: auto; scrollbar-width: none; } .dp-dr-tabs button { flex: none; border: 0; background: transparent; padding: .4rem .7rem; border-radius: 10px; font-weight: 700; font-size: .8rem; color: #6b7280; } .dp-dr-tabs button.on { background: #111827; color: #fff; } .dp-dr-body { flex: 1; overflow-y: auto; padding: .9rem 1rem 2rem; } .dr-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .7rem; } .dr-hero > div { padding: .6rem .7rem; border-radius: 14px; background: #f6f7fb; } .dr-hero small { display: block; color: #8a93a3; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; } .dr-hero b { font-size: 1rem; } .dr-card { padding: .6rem .8rem; border: 1px solid #e6e9ef; border-radius: 14px; margin-bottom: .5rem; } .dr-kv { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .85rem; border-bottom: 1px dashed #eef0f4; } .dr-kv:last-child { border-bottom: 0; } .dr-kv span { color: #8a93a3; flex: none; } .dr-kv b { text-align: right; font-weight: 600; min-width: 0; word-break: break-word; } .dr-name { font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: .5rem; padding-bottom: .4rem; } .dr-sec { margin: .9rem 0 .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a93a3; } .dr-it { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem 0; font-size: .85rem; border-bottom: 1px dashed #eef0f4; } .dr-tot { margin-top: .4rem; padding-top: .3rem; border-top: 1px solid #e6e9ef; } .dr-note { padding: .6rem .8rem; border-radius: 12px; background: #fff7e6; color: #7a4a00; font-size: .84rem; margin-top: .4rem; } .dr-empty { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 2.5rem 1rem; color: #8a93a3; text-align: center; } .dr-empty i { font-size: 2rem; } .dr-gauge { padding: .8rem; border-radius: 16px; background: #f6f7fb; color: #6b7280; } .dr-gauge.go { color: #16a34a; } .dr-gv { display: flex; align-items: baseline; gap: .4rem; } .dr-gv b { font-size: 2.4rem; line-height: 1; color: #111827; letter-spacing: -.03em; } .dr-gv small { font-weight: 700; } .dr-gbar { height: 8px; border-radius: 4px; background: #e5e7eb; overflow: hidden; margin: .5rem 0 .3rem; } .dr-gbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #16a34a, #f59e0b 60%, #dc2626); transition: width .6s; } .dr-gm { font-size: .78rem; } .dr-spark { width: 100%; height: 34px; margin-top: .4rem; color: #2563eb; } .dr-live-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; } .dr-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: .78rem; font-weight: 700; } .dr-tl { list-style: none; margin: 0; padding: 0 0 0 .8rem; border-left: 2px solid #e6e9ef; } .dr-tl li { position: relative; padding: 0 0 .9rem .9rem; } .dr-tl li::before { content: ""; position: absolute; left: -1.25rem; top: .25rem; width: 10px; height: 10px; border-radius: 50%; background: #111827; border: 2px solid #fff; } .dr-tl li.task::before { background: #2563eb; } .dr-tl .t { display: block; font-size: .72rem; color: #8a93a3; } .dr-tl b { font-size: .86rem; } .dr-tl small { display: block; color: #6b7280; } .dp-av.sm { width: 30px; height: 30px; font-size: .68rem; } .dp-spd-tip { background: #111827; color: #fff; border: 0; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); } .dp-spd-tip::before { display: none; } html[data-theme="dark"] :is(.dp-drawer) { background: #1b2230; } html[data-theme="dark"] :is(.dr-card, .dr-hero > div, .dr-gauge) { background: #232c3d; border-color: #2a3345; } html[data-theme="dark"] :is(.dp-dr-head, .dp-dr-tabs) { border-color: #2a3345; } html[data-theme="dark"] .dr-gv b { color: #f1f5f9; } html[data-theme="dark"] .dp-dr-x { background: #232c3d; color: #e5e7eb; } /* Kurye Merkezi sekme çubuğu */ .ch-hub { margin: -.2rem 0 1rem; background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; padding: .45rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .ch-sec { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; } .ch-s { flex: 1 0 auto; display: inline-flex; justify-content: center; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: 12px; color: #4b5563; text-decoration: none; font-weight: 700; font-size: .86rem; white-space: nowrap; } .ch-s:hover { background: #f3f5f9; color: #111827; } .ch-s.on { background: #111827; color: #fff; } .ch-sub { display: flex; gap: .2rem; flex-wrap: wrap; padding: .45rem .3rem .1rem; margin-top: .35rem; border-top: 1px solid #eef0f4; } .ch-l { padding: .3rem .75rem; border-radius: 999px; color: #6b7280; text-decoration: none; font-size: .82rem; font-weight: 600; } .ch-l:hover { background: #f3f5f9; color: #111827; } .ch-l.on { background: #eef2ff; color: #3730a3; } html[data-theme="dark"] .ch-hub { background: #1b2230; border-color: #2a3345; } html[data-theme="dark"] .ch-s { color: #cbd5e1; } html[data-theme="dark"] .ch-s:hover { background: #232c3d; color: #fff; } html[data-theme="dark"] .ch-s.on { background: #3b4a66; } html[data-theme="dark"] .ch-sub { border-color: #2a3345; } html[data-theme="dark"] .ch-l:hover { background: #232c3d; color: #fff; } html[data-theme="dark"] .ch-l.on { background: #26324d; color: #bcc8ff; }