/* ==========================================================================
Adisyon tasarım sistemi — restoran ve bakkal programları için ortak
Görsel dil: pembe → mor gradyan çerçeve, lavanta çalışma alanı, beyaz kartlar
Bootstrap 5.3 üzerine tema katmanı. Sınıf öneki: sm- (reklam engelleyicilere takılmaz)
========================================================================== */
:root {
/* Deefter marka vurgusu (logodaki magenta) ve durum renkleri */
--ad-primary: #ec0a6e;
--ad-primary-rgb: 236, 10, 110;
--ad-primary-dark: #c8005a;
--ad-primary-soft: #fde7f1;
--ad-purple: #1b2236; /* başlık / toplam mürekkebi (eski ad korunuyor) */
--ad-purple-dark: #121726;
--ad-purple-rgb: 27, 34, 54;
--ad-success: #16a34a;
--ad-success-2: #22c55e;
--ad-danger: #e11d48;
--ad-warning: #f59e0b;
--ad-info: #2e90fa;
--ad-grad: linear-gradient(135deg, #1b2130 0%, #0d1018 100%);
--ad-grad-side: var(--sh-side-bg);
--ad-grad-pink: linear-gradient(120deg, #ec0a6e 0%, #ff5a4e 100%);
--ad-grad-green: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
--ad-grad-blue: linear-gradient(135deg, #53a6ff 0%, #2563eb 100%);
--ad-grad-orange: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
--ad-bg: #f3f4f7;
--ad-surface: #ffffff;
--ad-surface-2: #f6f7fa;
--ad-border: #e4e7ec;
--ad-text: #141a2a;
--ad-muted: #6b7385;
/* uygulama kabuğu (açık tema) */
--sh-page: #e9ecf2;
--sh-fg: #141a2a;
--sh-fg-2: #6b7385;
--sh-btn: #ffffff;
--sh-btn-border: #e2e5ec;
--sh-btn-hover: #f6f7fa;
--sh-btn-shadow: 0 1px 2px rgba(16, 24, 40, .05);
--sh-frame-border: #e2e5ec;
--sh-frame-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 36px rgba(16, 24, 40, .08);
--sh-side-bg: #ffffff;
--sh-side-fg: #3b4356;
--sh-side-muted: #8b93a7;
--sh-side-hover: #f3f4f7;
--sh-side-active-bg: #fde7f1;
--sh-side-active-fg: #d1005f;
--sh-rail-bg: #ffffff;
--sh-rail-fg: #3b4356;
--sh-rail-line: #eef0f4;
--sh-rail-hover: #f3f4f7;
--sh-rail-on: #fde7f1;
--sh-cats-bg: #ffffff;
--sh-cats-fg: #3b4356;
--sh-cats-muted: #8b93a7;
--sh-cats-active-bg: #141a2a;
--sh-cats-active-fg: #ffffff;
/* sistem rengi (head.php config('sistem_renk') ile ezer) */
--sis-1: #ff7aa8;
--sis-2: #ec0a6e;
--ad-ikon-grad: linear-gradient(150deg, var(--sis-1), var(--sis-2));
--ad-side-w: 236px;
--ad-top-h: 60px;
--ad-rail-w: 76px;
--ad-cats-w: 186px;
--ad-radius: 14px;
--ad-radius-sm: 10px;
--ad-shadow: 0 1px 2px rgba(43, 35, 64, .04), 0 6px 18px rgba(43, 35, 64, .06);
--bs-primary: var(--ad-primary);
--bs-primary-rgb: var(--ad-primary-rgb);
--bs-success: var(--ad-success);
--bs-link-color: var(--ad-primary);
--bs-link-color-rgb: var(--ad-primary-rgb);
--bs-link-hover-color: var(--ad-primary-dark);
/* Apple yazı tipi: Apple cihazda SF Pro (sistem), diğerlerinde Inter (SF Pro'ya en yakın, vendor/inter) */
--ad-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--bs-body-font-family: var(--ad-font);
--bs-body-bg: var(--ad-bg);
--bs-body-color: var(--ad-text);
--bs-border-color: var(--ad-border);
--bs-border-radius: .65rem;
--bs-border-radius-lg: .85rem;
}
[data-bs-theme="dark"] {
--ad-primary: #ff2d87;
--ad-primary-rgb: 255, 45, 135;
--ad-primary-dark: #ec0a6e;
--ad-primary-soft: rgba(255, 45, 135, .15);
--ad-purple: #eceff5;
--ad-purple-dark: #ffffff;
--ad-purple-rgb: 236, 239, 245;
--ad-bg: #0f131b;
--ad-surface: #161b26;
--ad-surface-2: #1c2230;
--ad-border: #262d3c;
--ad-text: #e9ecf3;
--ad-muted: #9aa3b6;
--ad-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .28);
--sh-page: #0a0d13;
--sh-fg: #eceff5;
--sh-fg-2: #9aa3b6;
--sh-btn: #161b26;
--sh-btn-border: #262d3c;
--sh-btn-hover: #1c2230;
--sh-btn-shadow: none;
--sh-frame-border: #1d2330;
--sh-frame-shadow: 0 18px 44px rgba(0, 0, 0, .45);
--sh-side-bg: #11151e;
--sh-side-fg: #b9c0d0;
--sh-side-muted: #6e778c;
--sh-side-hover: rgba(255, 255, 255, .05);
--sh-side-active-bg: rgba(255, 45, 135, .14);
--sh-side-active-fg: #ff5c9e;
--sh-rail-bg: #11151e;
--sh-rail-fg: #c9cfdc;
--sh-rail-line: rgba(255, 255, 255, .05);
--sh-rail-hover: rgba(255, 255, 255, .05);
--sh-rail-on: rgba(255, 45, 135, .16);
--sh-cats-bg: #11151e;
--sh-cats-fg: #c9cfdc;
--sh-cats-muted: #6e778c;
--sh-cats-active-bg: #ec0a6e;
--sh-cats-active-fg: #ffffff;
--bs-body-bg: var(--ad-bg);
--bs-body-color: var(--ad-text);
--bs-border-color: var(--ad-border);
--bs-secondary-bg: var(--ad-surface-2);
--bs-tertiary-bg: var(--ad-surface-2);
}
html, body { height: 100%; }
body { background: var(--ad-bg); color: var(--ad-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: .92rem; font-optical-sizing: auto; }
/* Apple tipografisi: büyük başlıklarda hafif sıkı aralık (özgüllüğü sıfır: bileşen kuralları önceliklidir) */
:where(h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) { letter-spacing: -.015em; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6, .fw-bold { color: inherit; }
.text-muted, .text-secondary { color: var(--ad-muted) !important; }
.fw-600 { font-weight: 600; }
.fs-7 { font-size: .8125rem; }
.tabular { font-variant-numeric: tabular-nums; }
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }
.text-pink { color: var(--ad-primary) !important; }
.text-purple { color: var(--ad-purple) !important; }
[data-bs-theme="dark"] .text-purple { color: var(--ad-text) !important; }
/* ---------------------------------------------------------------- butonlar */
.btn { font-weight: 700; border-radius: .75rem; letter-spacing: 0; transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
--bs-btn-bg: var(--ad-primary); --bs-btn-border-color: transparent;
--bs-btn-hover-bg: var(--ad-primary-dark); --bs-btn-hover-border-color: transparent;
--bs-btn-active-bg: var(--ad-primary-dark); --bs-btn-active-border-color: transparent;
--bs-btn-disabled-bg: var(--ad-primary); --bs-btn-disabled-border-color: transparent;
background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), var(--ad-btn-grad, linear-gradient(135deg, #ff4f85 0%, #e8185c 55%, #cf1057 100%));
box-shadow: 0 8px 20px rgba(var(--ad-primary-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 26px rgba(var(--ad-primary-rgb), .36), inset 0 1px 0 rgba(255, 255, 255, .24); }
.btn-primary:disabled, .btn-primary.disabled { box-shadow: none; filter: saturate(.6); }
.btn-success {
--bs-btn-bg: var(--ad-success); --bs-btn-border-color: var(--ad-success);
--bs-btn-hover-bg: #34893f; --bs-btn-hover-border-color: #34893f;
--bs-btn-active-bg: #34893f; --bs-btn-active-border-color: #34893f;
background-image: var(--ad-grad-green); border: 0;
}
.btn-info { --bs-btn-bg: var(--ad-info); --bs-btn-border-color: var(--ad-info); --bs-btn-hover-bg: #3d62c8; --bs-btn-hover-border-color: #3d62c8; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; background-image: var(--ad-grad-blue); border: 0; }
.btn-outline-primary {
--bs-btn-color: var(--ad-primary); --bs-btn-border-color: var(--ad-primary);
--bs-btn-hover-bg: var(--ad-primary); --bs-btn-hover-border-color: var(--ad-primary);
--bs-btn-active-bg: var(--ad-primary-dark); --bs-btn-active-border-color: var(--ad-primary-dark);
}
.btn-purple { background: #1b2236; color: #fff; border: 0; }
.btn-purple:hover { background: #121726; color: #fff; }
[data-bs-theme="dark"] .btn-purple { background: #2a3245; }
.btn-soft { background: var(--ad-surface); border: 1px solid var(--ad-border); color: var(--ad-text); }
.btn-soft:hover { background: var(--ad-primary-soft); border-color: var(--ad-primary); color: var(--ad-primary); }
.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-lg { padding: .78rem 1.25rem; font-size: 1rem; border-radius: .9rem; }
.btn-upper { text-transform: uppercase; letter-spacing: .03em; }
.form-control, .form-select { border-radius: .65rem; background-color: var(--ad-surface); border-color: var(--ad-border); }
.form-control:focus, .form-select:focus { border-color: var(--ad-primary); box-shadow: 0 0 0 .2rem rgba(var(--ad-primary-rgb), .15); }
.form-check-input:checked { background-color: var(--ad-primary); border-color: var(--ad-primary); }
.form-label { font-weight: 600; font-size: .82rem; margin-bottom: .35rem; color: var(--ad-muted); }
.input-group-text { background: var(--ad-surface-2); border-color: var(--ad-border); }
.text-primary { color: var(--ad-primary) !important; }
.bg-primary { background-color: var(--ad-primary) !important; }
.bg-primary-soft { background: var(--ad-primary-soft) !important; }
/* ---------------------------------------------------------------- uygulama çerçevesi (Deefter kabuğu, açık / koyu) */
body.sm-shell { background: var(--sh-page); min-height: 100vh; }
.sm-top {
height: var(--ad-top-h); display: flex; align-items: center; gap: .75rem; padding: 0 1rem; color: var(--sh-fg); position: sticky; top: 0; z-index: 1020;
}
.sm-top-btn {
width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--sh-btn-border); background: var(--sh-btn); color: var(--sh-fg); display: inline-grid; place-items: center;
font-size: 1.1rem; flex: 0 0 38px; box-shadow: var(--sh-btn-shadow); transition: background .15s, border-color .15s, color .15s;
}
.sm-top-btn:hover { background: var(--sh-btn-hover); color: var(--ad-primary); border-color: color-mix(in srgb, var(--ad-primary) 35%, var(--sh-btn-border)); }
.sm-top-btn i.ph-fill, .sm-top .btn-icon i.ph-fill { font-size: 1.15rem; }
.sm-logo { height: 24px; width: auto; display: block; }
.logo-koyu, [data-bs-theme="dark"] .logo-acik { display: none !important; }
[data-bs-theme="dark"] .logo-koyu { display: block !important; }
.sm-brand { display: flex; align-items: center; gap: .55rem; color: var(--sh-fg); font-weight: 800; font-size: 1.12rem; letter-spacing: .02em; white-space: nowrap; }
.sm-brand:hover { color: var(--sh-fg); }
.sm-brand-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--ad-ikon-grad); display: grid; place-items: center; color: #fff; font-size: 1.1rem; flex: 0 0 34px; }
.sm-top-sep { width: 1px; height: 26px; background: var(--sh-btn-border); }
.sm-top-title { font-weight: 700; font-size: .9rem; margin: 0; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sh-fg); }
.sm-top .btn-soft, .sm-top .btn-icon.btn-soft { background: var(--sh-btn); border: 1px solid var(--sh-btn-border); color: var(--sh-fg); box-shadow: var(--sh-btn-shadow); }
.sm-top .btn-soft:hover { background: var(--sh-btn-hover); color: var(--ad-primary); border-color: color-mix(in srgb, var(--ad-primary) 35%, var(--sh-btn-border)); }
.sm-top .btn-outline-danger { color: var(--ad-danger); border-color: color-mix(in srgb, var(--ad-danger) 45%, transparent); background: color-mix(in srgb, var(--ad-danger) 8%, var(--sh-btn)); }
.sm-top .btn-outline-danger:hover { background: var(--ad-danger); color: #fff; }
.sm-net { display: flex; align-items: center; gap: .5rem; line-height: 1.1; font-size: .8rem; font-weight: 600; color: var(--sh-fg); }
.sm-net i { font-size: 1.2rem; color: #12b76a; }
.sm-net small { display: block; font-size: .6rem; color: var(--sh-fg-2); letter-spacing: .14em; font-weight: 700; margin-top: 1px; }
.sm-net.off i { color: #f79009; }
.sm-clock { text-align: right; line-height: 1.1; color: var(--sh-fg); }
.sm-clock b { display: block; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sm-clock small { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-fg-2); margin-top: 1px; white-space: nowrap; }
.sm-user-chip { display: flex; align-items: center; gap: .5rem; padding: .2rem .75rem .2rem .2rem; border-radius: 999px; background: var(--sh-btn); border: 1px solid var(--sh-btn-border); cursor: pointer; color: var(--sh-fg); box-shadow: var(--sh-btn-shadow); }
.sm-user-chip:hover { background: var(--sh-btn-hover); }
.sm-user-chip .u-isim { font-weight: 700; font-size: .82rem; line-height: 1.05; }
.sm-user-chip .u-alt { font-size: .6rem; letter-spacing: .1em; color: var(--sh-fg-2); text-transform: uppercase; font-weight: 600; }
.sm-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ad-grad-pink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: 0 0 32px; }
.sm-content .sm-avatar, .card .sm-avatar { background: var(--ad-grad-pink); color: #fff; }
/* çerçeve: yan menü + içerik */
.sm-frame {
display: flex; margin: 0 .9rem .9rem; border-radius: 18px; overflow: hidden; height: calc(100vh - var(--ad-top-h) - .9rem); height: calc(100dvh - var(--ad-top-h) - .9rem);
border: 1px solid var(--sh-frame-border); box-shadow: var(--sh-frame-shadow);
}
.sm-side { width: var(--ad-side-w); flex: 0 0 var(--ad-side-w); background: var(--sh-side-bg); color: var(--sh-side-fg); border-right: 1px solid var(--ad-border); display: flex; flex-direction: column; z-index: 1030; transition: width .2s, flex-basis .2s, transform .2s; }
.sm-nav { flex: 1; overflow-y: auto; padding: .6rem .7rem 1rem; scrollbar-width: none; }
.sm-nav::-webkit-scrollbar { display: none; }
.sm-nav-title { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--sh-side-muted); padding: 1rem .75rem .35rem; white-space: nowrap; font-weight: 700; }
.sm-nav a {
display: flex; align-items: center; gap: .8rem; padding: .6rem .75rem; border-radius: 12px; color: var(--sh-side-fg);
font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; margin-bottom: 2px; position: relative; transition: background .12s, color .12s;
}
.sm-nav a i { font-size: 1.15rem; width: 22px; text-align: center; flex: 0 0 22px; color: var(--sh-side-muted); transition: color .12s; }
.sm-nav a:hover { background: var(--sh-side-hover); color: var(--sh-fg); }
.sm-nav a:hover i { color: var(--sh-fg); }
.sm-nav a.active { background: var(--sh-side-active-bg); color: var(--sh-side-active-fg); }
.sm-nav a.active i { color: var(--sh-side-active-fg); }
.sm-nav .badge { margin-left: auto; }
.sm-side-foot { padding: .8rem 1rem; font-size: .7rem; color: var(--sh-side-muted); white-space: nowrap; overflow: hidden; border-top: 1px solid var(--ad-border); }
.sm-side-marka { display: flex; align-items: center; gap: .7rem; padding: 1rem .9rem .5rem; color: var(--sh-fg); min-width: 0; }
.sm-side-kare { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--ad-ikon-grad); box-shadow: 0 8px 18px color-mix(in srgb, var(--sis-2) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sm-side-kare i { font-size: 1.45rem; }
.sm-side-isim { font-weight: 700; font-size: .84rem; line-height: 1.2; }
.sm-side-alt { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-side-muted); margin-top: 3px; line-height: 1.25; }
.sm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ad-bg); }
.sm-content { padding: 1.3rem 1.4rem; flex: 1; overflow-y: auto; background: var(--ad-bg); }
body.side-mini .sm-side { width: 78px; flex-basis: 78px; }
body.side-mini .sm-nav a span, body.side-mini .sm-nav-title, body.side-mini .sm-nav .badge, body.side-mini .sm-side-foot { display: none; }
body.side-mini .sm-nav a { justify-content: center; }
body.side-mini .sm-side-marka { justify-content: center; padding-left: 0; padding-right: 0; }
body.side-mini .sm-side-marka > div { display: none; }
@media (max-width: 991.98px) {
.sm-top { padding: 0 .6rem; gap: .5rem; }
.sm-top-sep, .sm-net { display: none !important; }
.sm-frame { margin: 0; border-radius: 16px 16px 0 0; height: calc(100dvh - var(--ad-top-h)); border-bottom: 0; }
.sm-side { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); width: 270px; border-radius: 0 18px 18px 0; }
body.side-open .sm-side { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
body.side-open::after { content: ""; position: fixed; inset: 0; background: rgba(10, 13, 19, .5); z-index: 1025; }
body.side-mini .sm-side { width: 270px; }
body.side-mini .sm-nav a span, body.side-mini .sm-nav-title { display: initial; }
.sm-content { padding: .9rem; }
.sm-brand-text { display: none; }
.sm-top-title { font-size: .8rem; letter-spacing: .03em; min-width: 0; flex: 1 1 auto; }
.sm-top .ms-auto { flex: 0 0 auto; }
}
@media (max-width: 575.98px) {
.sm-brand { display: none; }
}
/* ---------------------------------------------------------------- kartlar */
.card { border: 0; border-radius: var(--ad-radius); box-shadow: var(--ad-shadow); background: var(--ad-surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--ad-border); padding: .95rem 1.15rem; font-weight: 600; color: var(--ad-primary); }
.card-body { padding: 1.15rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.page-head h1 { font-size: 1.3rem; font-weight: 700; margin: 0; color: var(--ad-purple); }
[data-bs-theme="dark"] .page-head h1 { color: var(--ad-text); }
.page-head .sub { color: var(--ad-muted); font-size: .84rem; }
/* Telefon Modu (Market) alt eylem çubukları: ortak görünümlerde de bulunur, yalnız Market'te telefon modunda açılır (app.css) */
.tm-alt-bar, .tm-yalniz { display: none; }
.stat { display: flex; gap: .9rem; align-items: center; padding: 1.05rem 1.15rem; }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 46px; }
.stat-label { font-size: .8rem; color: var(--ad-primary); font-weight: 500; }
.stat-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--ad-text); }
.bg-soft-primary { background: var(--ad-primary-soft); color: var(--ad-primary); }
.bg-soft-success { background: rgba(63, 163, 77, .13); color: var(--ad-success); }
.bg-soft-danger { background: rgba(225, 29, 72, .12); color: var(--ad-danger); }
.bg-soft-warning { background: rgba(243, 156, 50, .16); color: #c9771a; }
.bg-soft-info { background: rgba(79, 123, 224, .13); color: var(--ad-info); }
.bg-soft-secondary { background: rgba(138, 133, 153, .14); color: var(--ad-muted); }
.bg-soft-purple { background: rgba(var(--ad-purple-rgb), .12); color: var(--ad-purple); }
/* ---------------------------------------------------------------- tablolar */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem .95rem; border-color: var(--ad-border); vertical-align: middle; }
.table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ad-muted); font-weight: 600; background: var(--ad-surface-2); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--ad-primary-soft); }
.thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--ad-border); flex: 0 0 44px; }
.thumb-lg { width: 72px; height: 72px; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--ad-muted); }
.empty i { font-size: 2.6rem; display: block; margin-bottom: .6rem; opacity: .45; }
.badge { font-weight: 600; border-radius: 7px; padding: .38em .62em; }
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--ad-muted); }
.nav-pills .nav-link.active { background: var(--ad-primary); color: #fff; }
.pagination { --bs-pagination-active-bg: var(--ad-primary); --bs-pagination-active-border-color: var(--ad-primary); --bs-pagination-color: var(--ad-text); --bs-pagination-border-radius: .6rem; }
.modal-content { border-radius: 18px; border: 0; background: var(--ad-surface); }
.modal-header { border-bottom-color: var(--ad-border); }
.modal-title { color: var(--ad-purple); }
[data-bs-theme="dark"] .modal-title { color: var(--ad-text); }
.dropdown-menu { border-radius: .8rem; border: 0; box-shadow: 0 10px 30px rgba(43, 35, 64, .18); }
.alert { border: 0; border-radius: 12px; }
/* ---------------------------------------------------------------- giriş ekranı */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero { background: var(--ad-grad); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-hero::after { content: ""; position: absolute; right: -140px; bottom: -140px; width: 460px; height: 460px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.auth-hero::before { content: ""; position: absolute; left: -80px; top: 30%; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.auth-hero h2 { font-size: 2.1rem; font-weight: 700; line-height: 1.2; }
.auth-hero .feat { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; position: relative; z-index: 1; }
.auth-hero .feat i { font-size: 1.25rem; background: rgba(255, 255, 255, .16); width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 42px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: var(--ad-bg); }
.auth-box { width: 100%; max-width: 420px; background: var(--ad-surface); border-radius: 20px; padding: 2rem; box-shadow: var(--ad-shadow); }
.auth-box h3 { color: var(--ad-purple); }
[data-bs-theme="dark"] .auth-box h3 { color: var(--ad-text); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--ad-surface-2); border-radius: 999px; padding: 4px; margin-bottom: 1.5rem; }
.auth-tabs a { text-align: center; padding: .6rem; border-radius: 999px; font-weight: 600; color: var(--ad-muted); }
.auth-tabs a.active { background: var(--ad-grad-pink); color: #fff; box-shadow: 0 4px 12px rgba(var(--ad-primary-rgb), .3); }
/* Merkezi hesapla giriş (telefon / e-posta / sosyal) */
.hesap-ayrac { display: flex; align-items: center; gap: .8rem; color: var(--ad-muted); font-size: .8rem; margin: 1rem 0; }
.hesap-ayrac::before, .hesap-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--ad-border); }
.hesap-sosyal { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.hesap-sosyal-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; height: 48px; border-radius: 12px; border: 1px solid var(--ad-border); background: var(--ad-surface); font-weight: 600; font-size: .9rem; color: var(--ad-text); transition: border-color .15s, box-shadow .15s, transform .08s; }
.hesap-sosyal-btn:hover { border-color: rgba(var(--ad-primary-rgb), .45); box-shadow: 0 4px 14px rgba(43, 35, 64, .08); color: var(--ad-text); }
.hesap-sosyal-btn:active { transform: scale(.98); }
.hesap-sosyal-btn i { font-size: 1.15rem; }
.hesap-sosyal-btn.s-google i { color: #ea4335; }
.hesap-sosyal-btn.s-facebook i { color: #1877f2; }
.hesap-sosyal-btn.s-microsoft i { color: #00a4ef; }
.hesap-sosyal-btn.s-apple i { color: var(--ad-text); }
/* Deefter uygulama kabuğu (giriş ekranları) — deefter.com ana ekranıyla aynı zemin, üst ve alt çubuk; açık / koyu */
.dy-body { background: var(--sh-page); }
.dy-ekran {
position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); color: var(--sh-fg); overflow: hidden; isolation: isolate;
font-family: var(--ad-font);
background:
radial-gradient(46vw 46vw at 94% -6%, color-mix(in srgb, var(--sis-2) 15%, transparent), transparent 62%),
radial-gradient(40vw 40vw at 2% 106%, color-mix(in srgb, var(--ad-primary) 11%, transparent), transparent 60%),
var(--sh-page);
--dy-kenar: clamp(16px, 5vw, 96px);
}
.dy-ekran::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
background-image: radial-gradient(color-mix(in srgb, var(--sh-fg) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px;
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, transparent 70%); }
.dy-ust { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 2.4vw, 40px); padding: clamp(16px, 3vh, 30px) var(--dy-kenar) 0; min-width: 0; }
.dy-marka { grid-column: 2; display: flex; align-items: center; gap: 8px; color: var(--sh-fg); flex-shrink: 0; }
.dy-marka:hover { color: var(--sh-fg); }
.dy-marka img { height: clamp(26px, 2.8vh, 32px); width: auto; display: block; }
.dy-pro { display: none; }
.dy-ust-sag { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dy-saat { text-align: right; line-height: 1.15; margin-right: 6px; }
.dy-saat b { display: block; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dy-saat span { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-fg-2); margin-top: 2px; }
.dy-hap { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; min-width: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--sh-btn-border); background: var(--sh-btn); color: var(--sh-fg); font-size: .84rem; font-weight: 700; box-shadow: var(--sh-btn-shadow); transition: color .15s, border-color .15s; cursor: pointer; }
.dy-hap i { font-size: 1.15rem; }
.dy-hap:hover { color: var(--ad-primary); border-color: color-mix(in srgb, var(--ad-primary) 35%, var(--sh-btn-border)); }
.dy-hap.dy-ikon { padding: 0; width: 42px; }
.tema-gunes, [data-bs-theme="dark"] .tema-ay { display: none; }
[data-bs-theme="dark"] .tema-gunes { display: inline-block; }
.dy-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 96px); padding: clamp(20px, 4vh, 48px) var(--dy-kenar); max-width: 1440px; width: 100%; margin: 0 auto; }
.dy-tanitim { max-width: 470px; justify-self: end; width: 100%; animation: dyGir .5s ease both; }
.dy-tanitim h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: .45rem 0 .7rem; color: var(--sh-fg); }
.dy-slogan { color: var(--sh-fg-2); font-size: 1rem; font-weight: 500; margin-bottom: 1.6rem; }
.dy-ozellik { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dy-ozellik li { display: flex; gap: 14px; align-items: center; min-height: 64px; padding: 10px 16px 10px 12px; border-radius: 14px; background: var(--ad-surface); border: 1px solid var(--ad-border); box-shadow: var(--sh-btn-shadow); }
.dy-oz-ikon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; color: var(--sis-2); background: color-mix(in srgb, var(--sis-2) 13%, var(--ad-surface)); }
.dy-ozellik b { display: block; font-size: .88rem; font-weight: 700; color: var(--sh-fg); }
.dy-ozellik small { display: block; font-size: .76rem; font-weight: 500; color: var(--sh-fg-2); line-height: 1.35; margin-top: 2px; }
.dy-pencere-alan { justify-self: start; width: 100%; max-width: 460px; }
.dy-pencere.auth-box { position: relative; max-width: 460px; width: 100%; border-radius: 24px; padding: 3rem 2rem 2rem; color: var(--ad-text); border: 1px solid var(--ad-border); box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 28px 64px rgba(16, 24, 40, .12); animation: dyAc .35s ease both; }
[data-bs-theme="dark"] .dy-pencere.auth-box { box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.dy-kapat { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ad-surface-2); color: var(--ad-muted); font-size: .8rem; transition: background .15s, color .15s; }
.dy-kapat:hover { background: var(--ad-primary-soft); color: var(--ad-primary); }
.dy-pencere h3 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ad-text); padding-right: 2rem; }
.dy-pencere h3 + p { font-size: .9rem; }
.dy-pencere .hesap-ayrac { font-size: .7rem; font-weight: 700; letter-spacing: .12em; margin: 1.1rem 0; }
.ph-fill.dy-grad, .dy-grad .ph-fill { background: var(--ad-grad-pink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dy-pencere .auth-alt { border-radius: 0 0 24px 24px; }
.dy-alt { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px var(--dy-kenar) clamp(16px, 3.4vh, 34px); font-size: .74rem; font-weight: 500; color: var(--sh-fg-2); }
.dy-yasal { display: flex; gap: 14px; }
.dy-yasal a { color: var(--sh-fg-2); }
.dy-yasal a:hover { color: var(--ad-primary); }
.dy-tum { justify-self: end; color: var(--sh-fg-2); font-weight: 600; }
.dy-tum:hover { color: var(--ad-primary); }
@keyframes dyAc { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes dyGir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dy-pencere.auth-box, .dy-tanitim { animation: none; } }
@media (max-width: 991.98px) {
.dy-govde { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 22px; }
.dy-tanitim { display: none; }
.dy-pencere-alan { justify-self: center; }
.dy-saat { display: none; }
}
@media (max-width: 575.98px) {
.dy-hap span { display: none; }
.dy-hap, .dy-hap.dy-ikon { padding: 0; width: 44px; height: 44px; }
.dy-govde { padding: 16px 16px 20px; } /* kart kenarı 16 px */
.dy-pencere.auth-box { padding: 2.75rem 1.25rem 1.5rem; border-radius: 20px; }
/* kapat: görünen daire 32 px, dokunma alanı 44 px */
.dy-kapat { width: 44px; height: 44px; top: 6px; right: 6px; padding: 6px; background-clip: content-box; }
/* yasal metinler: tek düğme, açılınca iki sütun */
.dy-yasal-dugme { display: inline-flex; }
.dy-orta-alt .dy-yasal { display: none; }
.dy-orta-alt .dy-yasal.acik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; width: min(100%, 400px); text-align: left; }
.dy-yasal.acik a { display: flex; align-items: center; min-height: 40px; padding: 4px 6px; border-radius: 10px; font-size: .78rem; }
.dy-yasal.acik a:active { background: var(--sh-btn); }
.dy-pencere .auth-alt { margin: 1.25rem -1.25rem -1.5rem; border-radius: 0 0 20px 20px; }
.dy-alt { grid-template-columns: 1fr; justify-items: center; gap: 6px; text-align: center; }
.dy-tum { justify-self: center; }
.dy-ust [data-fullscreen] { display: none; } /* telefonda gereksiz; tema + hesap düğmeleri ortadaki logoya binmesin */
}
/* Giriş / üye ol kutusu (wzoop düzeni) */
.auth-baslik { display: flex; align-items: center; gap: .6rem; margin-bottom: .15rem; }
.auth-baslik img { height: 26px; width: auto; }
.auth-baslik h3 { margin: 0; }
/* dört sosyal hesap: yan yana kare küpler */
.sosyal-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.sosyal-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; aspect-ratio: 1 / 1; min-height: 76px; padding: .4rem; border-radius: 18px; font-weight: 700; font-size: .74rem; letter-spacing: .01em; border: 1.5px solid var(--ad-border); background: #fff; color: #1f2430; text-align: center; line-height: 1.1; transition: transform .08s, box-shadow .15s, filter .15s, border-color .15s; }
.sosyal-btn svg { width: 28px; height: 28px; flex-shrink: 0; }
.sosyal-btn i { font-size: 1.75rem; line-height: 1; }
a.sosyal-btn:hover { box-shadow: 0 8px 20px rgba(43, 35, 64, .12); border-color: #d9d3e8; color: inherit; transform: translateY(-1px); }
a.sosyal-btn:active { transform: scale(.98); }
.sosyal-btn.sb-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.sosyal-btn.sb-apple { background: #1f1f23; border-color: #1f1f23; color: #fff; }
a.sosyal-btn.sb-facebook:hover, a.sosyal-btn.sb-apple:hover { color: #fff; filter: brightness(1.08); }
.sosyal-btn.kapali { cursor: not-allowed; opacity: .62; filter: grayscale(.35); }
.sosyal-btn.kapali:not(.sb-facebook):not(.sb-apple) { color: #6b7280; }
.sosyal-btn em { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: .55rem; font-weight: 800; letter-spacing: .06em; background: #141a2a; color: #fff; padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.sosyal-btn.sb-apple em, .sosyal-btn.sb-facebook em { background: #fff; color: #141a2a; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
[data-bs-theme="dark"] .sosyal-btn:not(.sb-facebook):not(.sb-apple) { background: var(--ad-surface-2); color: var(--ad-text); border-color: var(--ad-border); }
[data-bs-theme="dark"] .sosyal-btn.sb-apple { background: #000; border-color: #2a3142; }
.telefon-giris { text-align: center; }
.tg-baslik { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--ad-purple); margin-bottom: .6rem; text-align: left; }
[data-bs-theme="dark"] .tg-baslik { color: var(--ad-text); }
.tg-alan { display: flex; align-items: stretch; height: 54px; margin: 0 0 .85rem; border-radius: 14px; border: 1.5px solid var(--ad-border); background: var(--ad-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.tg-alan:focus-within { border-color: var(--ad-primary); box-shadow: 0 0 0 .22rem rgba(var(--ad-primary-rgb), .12); }
.tg-onek { display: flex; align-items: center; gap: .45rem; padding: 0 .9rem; background: var(--ad-surface-2); border-right: 1px solid var(--ad-border); font-weight: 700; color: var(--ad-text); font-size: .95rem; white-space: nowrap; }
.tg-alan input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 1rem; font-size: 1.12rem; font-weight: 700; letter-spacing: .06em; color: var(--ad-text); outline: none; }
.tg-alan input::placeholder { color: color-mix(in srgb, var(--ad-muted) 70%, transparent); font-weight: 600; letter-spacing: .04em; }
.tg-btn { height: 54px; }
.tg-btn.tg-pasif { background-image: none; background-color: var(--ad-surface-2); color: var(--ad-muted); box-shadow: none; border: 1px solid var(--ad-border); }
/* Telefon ülke seçici (g#46): SVG bayrak + alan kodu düğmesi, aramalı liste (telefonda alt sayfa). telefon.js */
.tel-bayrak { width: 22px; height: 16.5px; flex: 0 0 22px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(16, 24, 40, .14); }
[data-bs-theme="dark"] .tel-bayrak { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.tel-ulke { display: inline-flex; align-items: center; gap: .42rem; cursor: pointer; font: inherit; font-weight: 700; color: var(--ad-text); white-space: nowrap;
transition: background-color .15s; }
.tel-ulke .tel-cc { font-variant-numeric: tabular-nums; }
.tel-ulke .tel-ok { font-size: .66rem; color: var(--ad-muted); transition: transform .15s; }
.tel-ulke[aria-expanded="true"] .tel-ok { transform: rotate(180deg); }
.tel-ulke:hover:not(:disabled) { background-color: color-mix(in srgb, var(--ad-primary) 7%, var(--ad-surface-2)); }
.tel-ulke:focus-visible { outline: 2px solid var(--ad-primary); outline-offset: -2px; position: relative; z-index: 3; }
.input-group > .tel-ulke { padding: 0 .6rem; border: var(--bs-border-width) solid var(--bs-border-color); background-color: var(--ad-surface-2); }
.tg-onek.tel-ulke { border: 0; border-right: 1px solid var(--ad-border); border-radius: 0; }
.tel-liste { position: fixed; z-index: 1085; width: min(330px, calc(100vw - 24px)); max-height: min(420px, 70vh); display: flex; flex-direction: column; overflow: hidden;
background: var(--ad-surface); color: var(--ad-text); border: 1px solid var(--sh-frame-border, var(--ad-border)); border-radius: 16px;
box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 24px 60px rgba(16, 24, 40, .22); animation: telAc .16s ease-out both; text-align: left; }
[data-bs-theme="dark"] .tel-liste { box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.tel-liste[hidden], .tel-perde[hidden] { display: none; }
@keyframes telAc { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tel-l-bas { display: none; }
.tel-l-ara { position: relative; flex: 0 0 auto; padding: 10px; border-bottom: 1px solid var(--ad-border); }
.tel-l-ara > i { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--ad-muted); font-size: .9rem; pointer-events: none; }
.tel-l-ara input { width: 100%; height: 42px; padding: 0 12px 0 36px; border-radius: 11px; border: 1px solid var(--ad-border); background: var(--ad-surface-2); color: var(--ad-text);
font-size: 16px; outline: none; }
.tel-l-ara input:focus { border-color: var(--ad-primary); box-shadow: 0 0 0 .2rem rgba(var(--ad-primary-rgb), .12); }
.tel-l-ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.tel-l-ul li[data-kod] { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px; border-radius: 10px; cursor: pointer; font-size: .92rem; }
.tel-l-ul li.aktif { background: var(--ad-surface-2); }
.tel-l-ul li.secili { font-weight: 700; background: color-mix(in srgb, var(--ad-primary) 10%, transparent); }
.tel-l-ul li.secili.aktif { background: color-mix(in srgb, var(--ad-primary) 16%, transparent); }
.tel-l-isim { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-l-cc { flex: 0 0 auto; color: var(--ad-muted); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tel-l-grup { padding: 10px 10px 4px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ad-muted); }
.tel-l-bos { padding: 22px 10px; text-align: center; color: var(--ad-muted); font-size: .9rem; }
.tel-perde { position: fixed; inset: 0; z-index: 1084; background: rgba(9, 12, 20, .45); animation: telPerde .18s ease-out both; }
@keyframes telPerde { from { opacity: 0; } to { opacity: 1; } }
html.tel-kilit, html.tel-kilit body { overflow: hidden; }
@media (max-width: 575.98px) {
/* telefonda alt sayfa: tam genişlik, büyük dokunma alanları */
.tel-liste { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 80vh; max-height: 80dvh; border-radius: 22px 22px 0 0; border-bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px); animation: telAlt .22s cubic-bezier(.2, .9, .3, 1) both; }
.tel-l-bas { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 4px 18px; }
.tel-l-bas b { font-size: 1rem; font-weight: 800; }
.tel-l-kapat { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ad-surface-2); color: var(--ad-text); display: grid; place-items: center; }
.tel-l-ul li[data-kod] { min-height: 48px; font-size: 1rem; }
}
@keyframes telAlt { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tel-liste, .tel-perde { animation: none; } }
.yasal-not { text-align: center; font-size: .74rem; color: var(--ad-muted); margin: 1rem 0 0; line-height: 1.5; }
.yasal-not a { font-weight: 700; color: var(--ad-text); text-decoration: underline; }
.auth-alt { margin: 1.25rem -2rem -2rem; padding: .95rem 1rem; background: var(--ad-surface-2); border-top: 1px solid var(--ad-border); border-radius: 0 0 20px 20px; text-align: center; font-size: .88rem; color: var(--ad-muted); }
.auth-alt a { font-weight: 700; color: var(--ad-purple); }
[data-bs-theme="dark"] .auth-alt a { color: var(--ad-text); }
.personel-giris summary { cursor: pointer; color: var(--ad-text); font-weight: 700; font-size: .9rem; text-align: center; list-style: none; padding: .5rem; border-radius: 10px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--ad-primary) 55%, transparent); }
.personel-giris summary::-webkit-details-marker { display: none; }
.personel-giris summary:hover { background: var(--ad-surface-2); color: var(--ad-text); }
.personel-giris[open] summary { color: var(--ad-primary); }
.auth-box .sm-brand-logo { background: var(--ad-grad-pink); }
.auth-marka { display: flex; align-items: center; gap: .9rem; }
.auth-logo { height: 42px; width: auto; display: block; }
.auth-sistem { font-weight: 600; font-size: .95rem; opacity: .9; padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .35); line-height: 1.2; }
.auth-logo-renkli { height: 40px; width: auto; }
[data-bs-theme="dark"] .auth-logo-renkli { filter: brightness(1.15); }
@media (max-width: 991.98px) {
.auth-wrap { grid-template-columns: 1fr; background: var(--ad-grad); }
.auth-hero { display: none; }
.auth-form { background: transparent; }
}
/* ---------------------------------------------------------------- POS ortak */
.pos-body { overflow: hidden; }
.sm-frame.pos-frame { background: var(--ad-bg); }
/* Kasa ekranlarında bilgi/hata mesajları çerçevenin yüksekliğini bozmasın: üstte yüzen kutu */
.pos-flash { position: fixed; top: calc(var(--ad-top-h) + .5rem); left: 50%; transform: translateX(-50%); z-index: 1600; width: min(620px, 92vw); padding: 0 !important; }
.pos-flash .alert { box-shadow: 0 12px 30px rgba(30, 12, 50, .25); }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.numpad button { height: 56px; font-size: 1.35rem; font-weight: 600; border-radius: 12px; border: 1px solid var(--ad-border); background: var(--ad-surface); color: var(--ad-text); }
.numpad button:active { transform: scale(.97); background: var(--ad-primary-soft); }
.big-total { font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ad-purple); }
[data-bs-theme="dark"] .big-total { color: var(--ad-text); }
.tile {
border: 0; background: var(--ad-surface); border-radius: 12px; padding: .45rem .45rem .6rem; cursor: pointer; text-align: left;
display: flex; flex-direction: column; gap: .2rem; user-select: none; transition: transform .08s, box-shadow .15s; box-shadow: 0 1px 3px rgba(43, 35, 64, .07);
}
.tile:hover { box-shadow: 0 8px 20px rgba(var(--ad-primary-rgb), .16); }
.tile:active { transform: scale(.97); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 9px; background: #fff; }
.tile .t-name { font-size: .78rem; font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; padding: 0 .2rem; }
.tile .t-price { font-weight: 700; color: var(--ad-primary); font-variant-numeric: tabular-nums; padding: 0 .2rem; font-size: .88rem; }
/* ================================================================ Menulux tarzı kasa bileşenleri (mx-)
başlık / satırlar / alt toplam
yol + arama / kart ızgarası
*/
/* sipariş/sepet paneli geniş ekranda orantılı büyür (Menulux ≈ %28) */
:root { --ad-panel-w: clamp(300px, 26vw, 520px); }
.mx-pos { display: grid; grid-template-columns: var(--ad-rail-w) var(--ad-panel-w) minmax(0, 1fr) var(--ad-cats-w); height: 100%; min-height: 0; }
.mx-pos.no-rail { grid-template-columns: var(--ad-panel-w) minmax(0, 1fr) var(--ad-cats-w); }
.mx-pos.no-cats { grid-template-columns: var(--ad-rail-w) var(--ad-panel-w) minmax(0, 1fr); }
/* kategori rozeti: Ad — koyu temada da okunur */
.kat-rozet { background: color-mix(in srgb, var(--kc, #8a8599) 14%, transparent); color: var(--kc, #8a8599); }
[data-bs-theme="dark"] .kat-rozet { background: color-mix(in srgb, var(--kc, #8a8599) 45%, #1c1629); color: #fff; }
.mx-rail { background: var(--sh-rail-bg); border-right: 1px solid var(--ad-border); display: flex; flex-direction: column; padding: .4rem 0; overflow-y: auto; scrollbar-width: none; }
.mx-rail::-webkit-scrollbar { display: none; }
.mx-rail > a, .mx-rail > button {
border: 0; background: transparent; color: var(--sh-rail-fg); display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .7rem .2rem; font-size: .68rem; font-weight: 600;
position: relative; text-align: center; line-height: 1.1; border-bottom: 1px solid var(--sh-rail-line); transition: background .12s, color .12s;
}
.mx-rail > a i, .mx-rail > button i { font-size: 1.25rem; }
.mx-rail > a i.ph-fill, .mx-rail > button i.ph-fill { font-size: 1.45rem; margin-bottom: 1px; }
.mx-rail > a:hover, .mx-rail > button:hover { background: var(--sh-rail-hover); color: var(--ad-primary); }
.mx-rail > .on { background: var(--sh-rail-on); color: var(--ad-primary); }
.mx-rail > [disabled] { opacity: .45; }
.mx-rail .kbd { font-size: .55rem; opacity: .6; font-weight: 600; }
.mx-rail .badge { position: absolute; top: 6px; right: 10px; background: var(--ad-primary) !important; color: #fff; font-size: .6rem; }
.mx-panel { background: var(--ad-surface); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ad-border); }
.mx-panel-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem .8rem; border-bottom: 2px solid var(--ad-border); }
.mx-panel-head .ttl { color: var(--ad-primary); font-weight: 600; font-size: .98rem; text-transform: none; }
.mx-panel-head .ttl.upper { text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; }
.mx-num { min-width: 24px; height: 24px; padding: 0 .4rem; border-radius: 999px; background: var(--ad-primary); color: #fff; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; }
.mx-pill-btn { background: var(--ad-primary); color: #fff; border: 0; border-radius: 8px; padding: .35rem .7rem; font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.mx-pill-btn:hover { background: var(--ad-primary-dark); color: #fff; }
.mx-lines { flex: 1; overflow-y: auto; padding: 0 1.1rem; }
.mx-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--ad-border); cursor: pointer; }
.mx-line .q { color: var(--ad-primary); font-weight: 700; font-size: .92rem; min-width: 1.8em; font-variant-numeric: tabular-nums; }
.mx-line .n { font-weight: 500; font-size: .92rem; line-height: 1.25; min-width: 0; }
.mx-line .n small { display: block; color: var(--ad-muted); font-size: .72rem; font-weight: 400; }
.mx-line .p { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-line.sel { background: linear-gradient(90deg, var(--ad-primary-soft), transparent); margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; box-shadow: inset 3px 0 0 var(--ad-primary); }
.mx-line-tools { grid-column: 1 / -1; display: none; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mx-line.sel .mx-line-tools { display: flex; }
.mx-line-tools button { border: 1px solid var(--ad-border); background: var(--ad-surface); border-radius: 9px; height: 34px; min-width: 34px; padding: 0 .55rem; font-weight: 600; color: var(--ad-text); font-size: .8rem; }
.mx-line-tools button:hover { border-color: var(--ad-primary); color: var(--ad-primary); }
.mx-line-tools .mx-qty-val { min-width: 52px; text-align: center; font-weight: 700; }
.mx-panel-foot { border-top: 2px solid var(--ad-border); padding: .9rem 1.1rem 1rem; }
.mx-total-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.mx-total-row .lbl { color: var(--ad-purple); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }
[data-bs-theme="dark"] .mx-total-row .lbl { color: var(--ad-text); }
.mx-total { font-size: 1.85rem; font-weight: 700; color: var(--ad-purple); font-variant-numeric: tabular-nums; line-height: 1; }
[data-bs-theme="dark"] .mx-total { color: var(--ad-text); }
.mx-btn-pay { background: var(--ad-grad-green); color: #fff; border: 0; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .85rem 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; box-shadow: 0 6px 16px rgba(63, 163, 77, .3); }
.mx-btn-pay:hover { filter: brightness(1.05); color: #fff; }
.mx-btn-pay:disabled { opacity: .5; box-shadow: none; }
.mx-btn-pink { background: var(--ad-grad-pink); color: #fff; border: 0; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .85rem 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; box-shadow: 0 6px 16px rgba(var(--ad-primary-rgb), .28); }
.mx-btn-pink:hover { filter: brightness(1.05); color: #fff; }
.mx-btn-blue { background: var(--ad-grad-blue); color: #fff; border: 0; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .85rem 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.mx-btn-blue:hover { filter: brightness(1.05); color: #fff; }
.mx-btn-outline { background: transparent; color: var(--ad-purple); border: 2px solid var(--ad-purple); border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .7rem 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.mx-btn-outline:hover { background: var(--ad-purple); color: var(--ad-surface); }
[data-bs-theme="dark"] .mx-btn-outline { color: var(--ad-text); border-color: #8c74c5; }
.mx-center { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--ad-bg); }
.mx-center-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem .6rem; }
.mx-crumb { color: var(--ad-muted); font-size: .84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-crumb b { color: var(--ad-purple); font-weight: 600; }
[data-bs-theme="dark"] .mx-crumb b { color: var(--ad-text); }
.mx-crumb .sep { color: var(--ad-primary); margin: 0 .4rem; font-size: .7rem; }
.mx-search { margin-left: auto; position: relative; width: min(280px, 50%); }
.mx-search input { width: 100%; height: 40px; border-radius: 999px; border: 1px solid var(--ad-border); background: var(--ad-surface); color: var(--ad-text); padding: 0 1rem 0 2.4rem; font-size: .85rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.mx-search input:focus { border-color: var(--ad-primary); box-shadow: 0 0 0 .2rem rgba(var(--ad-primary-rgb), .12); }
.mx-search input::placeholder { color: var(--ad-muted); }
.mx-search i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--ad-muted); }
.mx-grid { flex: 1; overflow-y: auto; padding: .3rem 1.1rem 1.1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .75rem; align-content: start; }
.mx-card {
background: var(--ad-surface); border-radius: 12px; padding: .45rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; position: relative; border: 0; text-align: left;
box-shadow: 0 1px 3px rgba(43, 35, 64, .07); transition: transform .08s, box-shadow .15s; user-select: none; color: var(--ad-text);
}
.mx-card:hover { box-shadow: 0 8px 22px rgba(var(--ad-primary-rgb), .17); }
.mx-card:active { transform: scale(.97); }
.mx-card .img { aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.mx-card .img img { width: 100%; height: 100%; object-fit: cover; }
.mx-card .img.contain img { object-fit: contain; }
.mx-card .img .harf { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: #fff; }
/* görselsiz ürün: kategori renginde yumuşak zemin + degradeli dolgulu ikon (--k: kategori rengi) */
.mx-card .img .harf.ikonlu, .urun-ikon { position: relative; overflow: hidden; display: grid; place-items: center; text-shadow: none;
background: radial-gradient(120% 100% at 22% 12%, color-mix(in srgb, var(--k, #e8185c) 24%, var(--ad-surface)) 0%, color-mix(in srgb, var(--k, #e8185c) 9%, var(--ad-surface)) 78%); }
.harf.ikonlu i.on, .urun-ikon i.on { position: relative; z-index: 1; font-size: 2.7rem;
background: linear-gradient(170deg, color-mix(in srgb, var(--k, #e8185c) 50%, #fff) 0%, var(--k, #e8185c) 55%, color-mix(in srgb, var(--k, #e8185c) 72%, #000) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--k, #e8185c) 32%, transparent)); }
.harf.ikonlu i.iz, .urun-ikon i.iz { position: absolute; right: -10%; bottom: -24%; font-size: 5.4rem; color: var(--k, #e8185c); opacity: .09; transform: rotate(-14deg); }
.mx-card:hover .harf.ikonlu i.on { transform: scale(1.06); transition: transform .15s; }
.mx-card .isim { font-size: .8rem; font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; padding: 0 .2rem; }
.mx-card .fy { display: flex; align-items: center; justify-content: space-between; padding: 0 .2rem .1rem; }
.mx-card .fy b { color: var(--ad-primary); font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; }
.mx-card .fy i { color: var(--ad-primary); font-size: .85rem; }
.mx-card .img { position: relative; }
.mx-card.kapali { pointer-events: none; }
.mx-card.kapali .img::after { content: "Satışa Kapalı"; position: absolute; inset: 0; background: rgba(20, 12, 30, .72); color: #fff; display: grid; place-items: center; font-weight: 600; }
.mx-cats { background: var(--sh-cats-bg); border-left: 1px solid var(--ad-border); color: var(--sh-cats-fg); overflow-y: auto; padding: 1rem 0 1rem .9rem; scrollbar-width: none; display: flex; flex-direction: column; }
.mx-cats::-webkit-scrollbar { display: none; }
.mx-cats .ttl { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sh-cats-muted); text-align: center; padding: 0 .9rem .8rem 0; font-weight: 700; }
.mx-cats button, .mx-cats a {
border: 0; background: transparent; color: var(--sh-cats-fg); text-transform: uppercase; font-weight: 700; font-size: .76rem; letter-spacing: .03em; padding: .8rem .8rem; text-align: center;
border-radius: 999px 0 0 999px; margin-bottom: .2rem; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.mx-cats button:hover, .mx-cats a:hover { background: var(--sh-rail-hover); color: var(--sh-fg); }
.mx-cats .active { background: var(--sh-cats-active-bg); color: var(--sh-cats-active-fg); margin-left: -1.6rem; padding-left: 1.6rem; box-shadow: -6px 4px 14px rgba(16, 24, 40, .14); }
.mx-cats .active:hover { background: var(--sh-cats-active-bg); color: var(--sh-cats-active-fg); }
.mx-cats .cnt { font-size: .62rem; opacity: .7; }
/* masa kartları */
.mx-masalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .85rem; align-content: start; }
.mx-masa {
aspect-ratio: 1.05 / 1; border-radius: 13px; background: var(--ad-surface); position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: .9rem .6rem .6rem; box-shadow: 0 1px 3px rgba(43, 35, 64, .08); transition: transform .08s, box-shadow .15s; color: var(--ad-text); user-select: none; border: 0;
}
.mx-masa::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 34px; height: 5px; border-radius: 99px; background: var(--ad-border); }
.mx-masa:hover { box-shadow: 0 8px 20px rgba(16, 24, 40, .14); }
.mx-masa:active { transform: scale(.97); }
.mx-masa .m-isim { font-weight: 600; font-size: 1rem; line-height: 1.2; }
.mx-masa .m-durum { color: var(--ad-muted); font-size: .78rem; }
.mx-masa .m-tutar { font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.mx-masa .m-alt { position: absolute; left: .6rem; right: .6rem; bottom: .45rem; display: flex; justify-content: space-between; font-size: .64rem; opacity: .9; }
.mx-masa .m-ust { position: absolute; left: .55rem; right: .55rem; top: .5rem; display: flex; justify-content: space-between; align-items: center; font-size: .66rem; }
.mx-masa .m-etiket { background: #fff; color: var(--ad-primary); border-radius: 999px; padding: .05rem .5rem; font-weight: 600; font-size: .64rem; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-masa.dolu { background: var(--ad-grad-pink); color: #fff; }
.mx-masa.hesap { background: var(--ad-grad-blue); color: #fff; }
.mx-masa.rezerve { background: var(--ad-grad-orange); color: #fff; }
.mx-masa.dolu::before, .mx-masa.hesap::before, .mx-masa.rezerve::before { background: rgba(255, 255, 255, .45); }
.mx-masa.dolu .m-durum, .mx-masa.hesap .m-durum, .mx-masa.rezerve .m-durum { color: rgba(255, 255, 255, .9); }
.mx-masa.sec { outline: 3px solid var(--ad-primary); outline-offset: 2px; }
a.mx-masa, a.mx-masa:hover { color: var(--ad-text); }
a.mx-masa.dolu, a.mx-masa.hesap, a.mx-masa.rezerve, a.mx-masa.dolu:hover, a.mx-masa.hesap:hover, a.mx-masa.rezerve:hover { color: #fff; }
.mx-btn-pink:disabled, .mx-btn-blue:disabled, .mx-btn-outline:disabled, .mx-btn-pink.disabled, .mx-btn-blue.disabled, .mx-btn-outline.disabled { opacity: .5; box-shadow: none; pointer-events: none; filter: grayscale(.2); }
/* iki kolon: sadece orta alan + sağ şerit (ör. mutfak) */
.mx-pos.only-center { grid-template-columns: minmax(0, 1fr) var(--ad-cats-w); }
/* segment (durum) seçici */
.mx-seg { display: inline-flex; background: var(--ad-surface-2); border-radius: 999px; padding: 4px; gap: 2px; }
.mx-seg button { border: 0; background: transparent; border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .82rem; color: var(--ad-muted); display: inline-flex; align-items: center; gap: .4rem; }
.mx-seg button.active { background: var(--ad-surface); color: var(--ad-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 3px 10px rgba(16, 24, 40, .08); }
.mx-tabs { display: flex; }
.mx-tabs button { flex: 1; border: 0; background: var(--ad-surface-2); color: var(--ad-muted); padding: .9rem 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.mx-tabs button:first-child { border-top-left-radius: 0; }
.mx-tabs button.active { background: var(--ad-surface); color: var(--ad-text); border-radius: 14px 14px 0 0; }
.mx-tabs .mx-num { background: var(--ad-primary); }
.mx-tabs button:not(.active) .mx-num { background: var(--ad-muted); }
.mx-durum { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .65rem; font-size: .7rem; font-weight: 600; background: rgba(46, 144, 250, .14); color: #1570ef; }
.mx-durum.gri { background: rgba(138, 133, 153, .18); color: var(--ad-muted); }
.mx-durum.yesil { background: rgba(63, 163, 77, .16); color: var(--ad-success); }
.mx-durum.pembe { background: var(--ad-primary-soft); color: var(--ad-primary); }
@media (max-width: 1199.98px) {
:root { --ad-cats-w: 150px; --ad-rail-w: 68px; }
:root { --ad-panel-w: clamp(270px, 30vw, 320px); }
}
@media (max-width: 991.98px) {
.pos-body { overflow: auto; }
.sm-frame.pos-frame { height: auto; min-height: calc(100dvh - var(--ad-top-h)); overflow: visible; }
.mx-pos, .mx-pos.no-rail, .mx-pos.no-cats { display: flex; flex-direction: column; height: auto; }
.mx-rail { flex-direction: row; overflow-x: auto; padding: 0; order: 0; }
.mx-rail > a, .mx-rail > button { flex: 0 0 auto; min-width: 72px; border-bottom: 0; border-right: 1px solid var(--sh-rail-line); }
.mx-rail { border-right: 0; border-bottom: 1px solid var(--ad-border); }
.mx-cats { border-left: 0; border-bottom: 1px solid var(--ad-border); }
.mx-cats { flex-direction: row; overflow-x: auto; padding: .5rem; order: 1; gap: .3rem; }
.mx-cats .ttl { display: none; }
.mx-cats button, .mx-cats a { border-radius: 999px; white-space: nowrap; flex: 0 0 auto; padding: .55rem .9rem; margin: 0; }
.mx-cats .active { margin: 0; padding-left: .9rem; box-shadow: none; }
.mx-center { order: 2; }
.mx-panel { order: 3; border-right: 0; }
.mx-grid { overflow: visible; }
.mx-lines { max-height: none; overflow: visible; }
}
/* ---------------------------------------------------------------- PIN ile personel seçimi */
.pin-kisiler { display: grid; gap: .5rem; max-height: 50vh; overflow-y: auto; }
.pin-kisiler button { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--ad-border); background: var(--ad-surface); border-radius: 12px; padding: .6rem .75rem; color: var(--ad-text); text-align: left; }
.pin-kisiler button:hover { border-color: var(--ad-primary); background: var(--ad-primary-soft); }
.pin-kisiler button.aktif { border-color: var(--ad-primary); box-shadow: inset 3px 0 0 var(--ad-primary); }
.pin-kisiler .sm-avatar { background: var(--ad-grad-pink); color: #fff; }
/* ---------------------------------------------------------------- bildirim */
.sm-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; max-width: 360px; }
.sm-toast { background: var(--ad-surface); border-radius: 12px; border-left: 4px solid var(--ad-primary); padding: .75rem 1rem; box-shadow: 0 10px 30px rgba(43, 35, 64, .2); display: flex; gap: .6rem; align-items: flex-start; animation: adIn .2s ease; font-weight: 500; }
.sm-toast.success { border-left-color: var(--ad-success); }
.sm-toast.danger { border-left-color: var(--ad-danger); }
.sm-toast.warning { border-left-color: var(--ad-warning); }
@keyframes adIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ---------------------------------------------------------------- yazdırma */
@media print {
.no-print, .sm-side, .sm-top, .sm-toasts { display: none !important; }
body, body.sm-shell, .sm-content, .sm-frame { background: #fff !important; padding: 0 !important; margin: 0 !important; height: auto !important; box-shadow: none !important; overflow: visible !important; }
.card { box-shadow: none !important; border: 0 !important; }
}
@media (max-width: 380px) { .sosyal-btn { font-size: .66rem; border-radius: 14px; } .sosyal-btn svg { width: 24px; height: 24px; } .sosyal-btn i { font-size: 1.5rem; } }
/* ---------------------------------------------------------------- paketler / kilit */
.sm-nav a .sm-kilit { margin-left: auto; font-size: .85rem; width: auto; flex: 0 0 auto; color: var(--sh-side-muted); }
.paket-durum { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 16px 18px; border-radius: 18px; background: var(--ad-surface); border: 1px solid var(--ad-border); box-shadow: var(--ad-shadow); margin-bottom: 1.2rem; }
.paket-durum.doldu { border-color: color-mix(in srgb, var(--ad-danger) 45%, var(--ad-border)); }
.pd-ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: var(--ad-ikon-grad); flex-shrink: 0; }
.pd-ust { font-size: .64rem; font-weight: 800; letter-spacing: .16em; color: var(--ad-muted); }
.pd-isim { font-size: 1.15rem; font-weight: 800; }
.pd-alt { font-size: .84rem; color: var(--ad-muted); }
.paketler { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: stretch; }
.paket-kart { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 16px 16px; border-radius: 18px; background: var(--ad-surface); border: 1px solid var(--ad-border); box-shadow: var(--ad-shadow); }
.paket-kart.mevcut { border: 2px solid var(--ad-primary); }
.paket-kart.pk-esnaf:not(.mevcut) { border-color: color-mix(in srgb, var(--ad-primary) 40%, var(--ad-border)); }
.pk-rozet { position: absolute; top: -10px; left: 16px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; background: var(--ad-primary); color: #fff; }
.pk-rozet.populer { background: var(--ad-text); color: var(--ad-surface); }
.pk-isim { font-weight: 800; font-size: 1rem; }
.pk-fiyat { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pk-sure { font-size: .76rem; font-weight: 700; color: var(--ad-muted); margin-bottom: 8px; }
.pk-liste { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 7px; font-size: .8rem; flex: 1; }
.pk-liste li { display: flex; gap: 7px; align-items: flex-start; line-height: 1.3; }
.pk-liste li i { font-size: 1rem; color: var(--ad-success); flex-shrink: 0; margin-top: 1px; }
.pk-liste li.yok { color: var(--ad-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ad-muted) 50%, transparent); }
.pk-liste li.yok i { color: var(--ad-muted); }
.pk-liste li.yakinda i { color: var(--ad-warning); }
.pk-liste li small { font-size: .62rem; font-weight: 700; color: var(--ad-warning); }
.pk-al-form { margin: 0; }
.pk-wa { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; font-size: .74rem; font-weight: 600; color: var(--ad-muted); text-decoration: none; }
.pk-wa:hover { color: #16a34a; }
.pk-wa i { color: #16a34a; }
.pk-not { font-size: .76rem; font-weight: 700; color: var(--ad-muted); text-align: center; padding: 9px; border-radius: 10px; background: var(--ad-surface-2); }
.paket-kilit { max-width: 560px; margin: 4vh auto; text-align: center; padding: 32px 24px; border-radius: 22px; background: var(--ad-surface); border: 1px solid var(--ad-border); box-shadow: var(--ad-shadow); }
.paket-kilit .pk-ikon { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center; font-size: 2.1rem; color: #fff; background: var(--ad-ikon-grad); }
.paket-kilit h1 { font-size: 1.4rem; font-weight: 800; }
.pk-mevcut { font-size: .84rem; color: var(--ad-muted); }
/* ---------------------------------------------------------------- kurulu uygulama (PWA) ve çentikli ekranlar
viewport-fit=cover ile sayfa ekranın kenarına kadar uzanır: durum çubuğu, çentik ve alt çizginin (home indicator)
altında kalan düğmelere dokunulamaz. Boşluklar env(safe-area-inset-*) kadar açılır; çentiksiz cihazlarda 0'dır. */
:root { --ad-top-h: calc(60px + env(safe-area-inset-top, 0px)); }
.sm-top { padding-top: env(safe-area-inset-top, 0px); padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
.sm-frame { margin-left: max(.9rem, env(safe-area-inset-left, 0px)); margin-right: max(.9rem, env(safe-area-inset-right, 0px)); margin-bottom: max(.9rem, env(safe-area-inset-bottom, 0px));
height: calc(100dvh - var(--ad-top-h) - max(.9rem, env(safe-area-inset-bottom, 0px))); }
.dy-ust { padding-top: max(clamp(16px, 3vh, 30px), env(safe-area-inset-top, 0px)); padding-left: max(var(--dy-kenar), env(safe-area-inset-left, 0px)); padding-right: max(var(--dy-kenar), env(safe-area-inset-right, 0px)); }
.dy-alt { padding-bottom: max(clamp(16px, 3.4vh, 34px), env(safe-area-inset-bottom, 0px)); }
@media (max-width: 991.98px) {
.sm-top { padding-left: max(.6rem, env(safe-area-inset-left, 0px)); padding-right: max(.6rem, env(safe-area-inset-right, 0px)); }
.sm-frame { margin: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); height: calc(100dvh - var(--ad-top-h)); }
.sm-content { padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); }
.sm-side { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* Kurulu uygulamada: aşağı çekince yenileme kazara satışı bölmesin; tam ekran düğmesi gereksiz (zaten tam ekran) */
html.kurulu, html.kurulu body { overscroll-behavior-y: none; }
html.kurulu [data-fullscreen], html.tam-ekran-yok [data-fullscreen] { display: none !important; }
/* ---------------------------------------------------------------- giriş ekranı: üst sağ ve alt alan deefter.com ana ekranıyla aynı */
.dy-ust-sag .dy-durum { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--sh-btn-border);
background: var(--sh-btn); color: var(--sh-fg); box-shadow: var(--sh-btn-shadow); font-size: .8rem; font-weight: 700; line-height: 1.05; }
.dy-ust-sag .dy-durum i { font-size: 1.15rem; color: #22a35a; }
.dy-ust-sag .dy-durum small { display: block; font-size: .58rem; letter-spacing: .1em; color: var(--sh-fg-2); font-weight: 700; }
.dy-ust-sag .dy-durum.off i { color: var(--ad-danger); }
.dy-profil { color: #fff !important; background: var(--ad-grad-pink); border-color: transparent; }
.dy-alt { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
.dy-destek { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .84rem; color: var(--sh-fg); }
.dy-destek i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #25d366; font-size: 1rem; }
.dy-destek:hover { color: var(--ad-primary); }
.dy-orta-alt { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.dy-orta-alt .dy-yasal { flex-wrap: wrap; justify-content: center; gap: 4px 12px; max-width: 760px; }
.dy-yasal-dugme { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--sh-btn-border); border-radius: 999px; background: var(--sh-btn);
color: var(--sh-fg); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.dy-yasal-dugme .dy-yasal-ok { font-size: .7rem; transition: transform .15s; }
.dy-yasal-dugme[aria-expanded="true"] .dy-yasal-ok { transform: rotate(180deg); }
@media (max-width: 575.98px) { .dy-yasal-dugme { display: inline-flex; } } /* telefonda görünür (taban kuralından sonra) */
/* g#47 giriş ekranları: dokunma alanları ≥ 44 px (telefon ve tablet) */
@media (max-width: 991.98px) {
.dy-pencere .btn-link { min-height: 44px; display: inline-flex; align-items: center; }
.dy-pencere .input-group > .form-control, .dy-pencere .input-group > .btn, .dy-pencere .input-group > .input-group-text { min-height: 44px; }
.tel-l-ul li[data-kod] { min-height: 44px; }
}
/* dokunmatik ekran (yatay telefon, tablet): üst düğmeler ve kapat 44 px */
@media (pointer: coarse) {
.dy-hap { height: 44px; min-width: 44px; }
.dy-hap.dy-ikon { width: 44px; }
.dy-kapat { width: 44px; height: 44px; top: 6px; right: 6px; padding: 6px; background-clip: content-box; }
}
/* küçük telefonlar (< 375 px): logo solda, sosyal düğmeler 2×2, telefon alanı sıkı, başlık küçük */
@media (max-width: 374.98px) {
.dy-ust { grid-template-columns: auto minmax(0, 1fr); }
.dy-marka { grid-column: 1; }
.dy-ust-sag { grid-column: 2; gap: 8px; }
.dy-pencere h3 { font-size: 1.35rem; }
.sosyal-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.sosyal-btn { aspect-ratio: auto; min-height: 52px; flex-direction: row; justify-content: flex-start; gap: .55rem; padding: .45rem .75rem; font-size: .8rem; border-radius: 14px; }
.sosyal-btn svg { width: 22px; height: 22px; }
.sosyal-btn i { font-size: 1.35rem; }
.sosyal-btn em { top: -7px; left: auto; right: 8px; transform: none; }
.tg-onek { padding: 0 .6rem; gap: .3rem; }
.tg-alan input { padding: 0 .6rem; letter-spacing: 0; font-size: 1rem; }
}
@media (max-width: 359.98px) { .tg-onek .tel-ok { display: none; } } /* çok dar ekranda yer tutucu sığsın */
.dy-alt-sag { justify-self: end; display: flex; align-items: center; gap: 12px; }
.dy-yukle { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 0; color: #fff; cursor: pointer;
background: linear-gradient(150deg, var(--sis-1), var(--sis-2)); box-shadow: 0 12px 26px -8px rgba(var(--ad-primary-rgb), .55); animation: dy-suzul 3.2s ease-in-out infinite; transition: filter .15s; }
.dy-yukle[hidden] { display: none; }
.dy-yukle i { font-size: 1.3rem; }
.dy-yukle:hover, .dy-yukle:focus-visible { filter: brightness(1.07); color: #fff; }
@keyframes dy-suzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .dy-yukle { animation: none; } }
/* "Tüm sistemler": sağ altta düğme, yukarı doğru açılan 4'lü kompakt kutulu menü (deefter.com'daki tüm aktif + yakında sistemler) */
.dy-sistemler { position: relative; }
/* yazısız, yuvarlak, süzülen ızgara ikonu (indirme ikonuyla zıt evrede); uygulama renginde (hesapta Deefter pembesi) */
.dy-alt .dy-tum { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer;
background: linear-gradient(150deg, var(--sis-1), var(--sis-2)); box-shadow: 0 12px 26px -8px rgba(var(--ad-primary-rgb), .55);
animation: dy-suzul 3.2s ease-in-out infinite; animation-delay: -1.6s; transition: filter .15s, box-shadow .15s; }
.dy-alt .dy-tum:hover, .dy-alt .dy-tum:focus-visible, .dy-alt .dy-tum[aria-expanded="true"] { color: #fff; filter: brightness(1.07);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--sis-2) 22%, transparent), 0 12px 26px -8px rgba(var(--ad-primary-rgb), .55); }
.dy-alt .dy-tum svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .dy-alt .dy-tum { animation: none; } }
.dy-tum svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
.dy-tum .dy-ok { width: 14px; height: 14px; fill: none; transition: transform .2s; }
.dy-tum[aria-expanded="true"] .dy-ok { transform: rotate(180deg); }
.dy-sistem-panel { position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 60; width: min(420px, calc(100vw - 32px)); padding: 12px; border-radius: 22px;
display: flex; flex-direction: column; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px);
background: var(--ad-surface); border: 1px solid var(--sh-frame-border); box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 28px 64px rgba(16, 24, 40, .18);
transform-origin: bottom right; animation: dySpAc .2s cubic-bezier(.2, .9, .3, 1.2) both; text-align: left; }
[data-bs-theme="dark"] .dy-sistem-panel { box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.dy-sistem-panel[hidden] { display: none; }
@keyframes dySpAc { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.dy-sp-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 10px; flex: 0 0 auto; }
.dy-sp-bas b { font-size: .86rem; font-weight: 800; color: var(--ad-text); }
.dy-sp-bas a { font-size: .72rem; font-weight: 700; color: var(--sh-fg-2); }
.dy-sp-bas a:hover { color: var(--ad-primary); }
.dy-sp-bas span { font-size: .72rem; font-weight: 700; color: var(--sh-fg-2); }
/* uzun listede ızgara kendi içinde kayar (başlık sabit); kenar boşluğu üzerine gelince kalkan kutu kırpılmasın diye */
.dy-sp-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
margin: -3px; padding: 3px; scrollbar-width: thin; }
.dy-sp-kutu { --k1: #f472b6; --k2: #ec0a6e; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0;
padding: 10px 4px 8px; border-radius: 14px; background: var(--sh-btn); border: 1px solid var(--sh-btn-border); color: var(--ad-text); text-align: center; text-decoration: none;
transition: transform .14s, border-color .15s, box-shadow .15s; }
a.dy-sp-kutu:hover, a.dy-sp-kutu:focus-visible { transform: translateY(-2px); color: var(--ad-text); border-color: color-mix(in srgb, var(--k2) 45%, var(--sh-btn-border));
box-shadow: 0 10px 24px color-mix(in srgb, var(--k2) 22%, transparent); outline: none; }
.dy-sp-ikon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 1.05rem;
background: linear-gradient(135deg, var(--k1), var(--k2)); box-shadow: 0 4px 10px color-mix(in srgb, var(--k2) 28%, transparent); }
.dy-sp-kutu b { max-width: 100%; font-size: .68rem; font-weight: 700; line-height: 1.18; overflow-wrap: break-word; }
.dy-sp-kutu small { font-size: .56rem; font-weight: 700; color: var(--sh-fg-2); margin-top: auto; } /* etiket kartın altında: satırdaki kartlar hizalı */
.dy-sp-kutu.bu { border-color: color-mix(in srgb, var(--k2) 55%, var(--sh-btn-border)); background: color-mix(in srgb, var(--k2) 8%, var(--sh-btn)); }
.dy-sp-kutu.bu small { color: var(--k2); }
.dy-sp-kutu.yakinda { cursor: default; }
.dy-sp-kutu.yakinda .dy-sp-ikon { background: linear-gradient(150deg, color-mix(in srgb, var(--k2) 58%, #fff), var(--k2)); color: #fff; opacity: .88; box-shadow: none; }
[data-bs-theme="dark"] .dy-sp-ikon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.dy-sp-kutu.yakinda b { color: var(--sh-fg-2); }
/* "Uygulamayı indir": indirme ikonunun üstünde açılan küçük pencere (deefter.com indirme penceresinin sade hâli).
Manifest / PWA etkin; Windows, Android (APK), iOS pasif ve "Yakında" */
.dy-indirme { position: relative; display: flex; }
.dy-indir-panel { position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 60; width: min(304px, calc(100vw - 32px)); padding: 12px; border-radius: 20px;
background: var(--ad-surface); border: 1px solid var(--sh-frame-border); box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 28px 64px rgba(16, 24, 40, .18);
transform-origin: bottom right; animation: dySpAc .2s cubic-bezier(.2, .9, .3, 1.2) both; text-align: left; }
[data-bs-theme="dark"] .dy-indir-panel { box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.dy-indir-panel[hidden] { display: none; }
.dy-ip-liste { display: grid; gap: 6px; }
.dy-ip-secenek { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 7px 10px 7px 8px; border: 1px solid var(--sh-btn-border); border-radius: 14px;
background: var(--sh-btn); color: var(--ad-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .14s; }
.dy-ip-secenek:not(:disabled):hover, .dy-ip-secenek:not(:disabled):focus-visible { border-color: color-mix(in srgb, var(--sis-2) 50%, var(--sh-btn-border));
box-shadow: 0 8px 20px color-mix(in srgb, var(--sis-2) 18%, transparent); transform: translateY(-1px); outline: none; }
.dy-ip-ikon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; color: #fff;
background: linear-gradient(150deg, var(--sis-1), var(--sis-2)); box-shadow: 0 4px 10px rgba(var(--ad-primary-rgb), .3); }
.dy-ip-metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dy-ip-metin b { font-size: .8rem; font-weight: 700; }
.dy-ip-metin small { font-size: .66rem; font-weight: 600; color: var(--sh-fg-2); }
.dy-ip-ok { flex: 0 0 auto; font-size: .8rem; color: var(--sh-fg-2); }
.dy-ip-secenek:disabled { cursor: default; opacity: .6; }
.dy-ip-secenek:disabled .dy-ip-ikon { background: var(--sh-btn-border); color: var(--sh-fg-2); box-shadow: none; }
.dy-ip-yakinda { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--sh-btn-border); font-size: .58rem; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--sh-fg-2); background: color-mix(in srgb, var(--sh-fg-2) 10%, transparent); }
svg.tema-svg { flex: 0 0 auto; vertical-align: middle; }
.dy-alt-bos { min-width: 1px; }
@media (max-width: 991.98px) {
.dy-ust-sag .dy-durum { display: none; }
.dy-alt { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.dy-destek, .dy-alt-sag { justify-self: center; }
.dy-alt-bos { display: none; }
/* telefonda menü ekrana ortalı, alt çubuğun üstünde */
.dy-indir-panel { position: fixed; left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: 360px; margin: 0 auto; transform-origin: bottom center; }
.dy-sistem-panel { position: fixed; left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: 440px; margin: 0 auto;
max-height: calc(100vh - 118px); max-height: calc(100dvh - 118px - env(safe-area-inset-bottom, 0px)); transform-origin: bottom center; }
}
/* dar telefonlarda 4 sütun sığmaz: 3, çok dar ekranda 2 sütun (taşma yok) */
@media (max-width: 359.98px) { .dy-sp-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 299.98px) { .dy-sp-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* sol menü ayırıcı çizgisi (grup başlıkları yerine) */
.sm-nav-ayrac { height: 1px; margin: .55rem .9rem; background: var(--ad-border); }
body.side-mini .sm-nav-ayrac { margin: .55rem .5rem; }
/* Ayarlar / Profilim > Giriş yöntemleri */
.gy-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.gy-satir { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--ad-border); border-radius: 14px; background: var(--ad-surface); min-width: 0; }
.gy-ikon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ad-surface-2); border: 1px solid var(--ad-border); font-size: 1.25rem; color: var(--ad-text); }
.gy-ikon svg { width: 22px; height: 22px; }
.gy-ikon.gy-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.gy-ikon.gy-apple { background: #1f1f23; border-color: #1f1f23; color: #fff; }
.gy-ikon.gy-telefon { background: var(--ad-primary-soft); border-color: transparent; color: var(--ad-primary); }
.gy-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.gy-metin small { color: var(--ad-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-durum { font-size: .8rem; font-weight: 600; color: var(--ad-success); white-space: nowrap; }
.gy-yakinda { font-size: .66rem; font-weight: 800; letter-spacing: .05em; color: var(--ad-muted); background: var(--ad-surface-2); border: 1px solid var(--ad-border); border-radius: 999px; padding: .2rem .55rem; }
.gy-satir .btn { white-space: nowrap; }
/* Uygulamayı yükle sayfası (/yukle): Destek / İndirme ile aynı adımlar */
.yk-kutu { display: grid; gap: 14px; }
.yk-ust { display: flex; align-items: center; gap: 12px; }
.yk-ikon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--a1), var(--a2)); box-shadow: 0 10px 22px -10px var(--a2); }
.yk-ikon i { font-size: 1.6rem; }
.yk-adimlar { display: grid; gap: 8px; }
.yk-adimlar > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ad-border); font-size: .8rem; color: var(--ad-muted); }
.yk-adimlar > div > i { grid-row: span 2; align-self: center; font-size: 1.3rem; color: var(--ad-muted); }
.yk-adimlar > div b { color: var(--ad-text); font-size: .84rem; }
.yk-adimlar > div.aktif { border-color: color-mix(in srgb, var(--ad-primary) 45%, var(--ad-border)); background: color-mix(in srgb, var(--ad-primary) 6%, transparent); }
.yk-adimlar > div.aktif > i { color: var(--ad-primary); }
/* Tek giriş (g#45): numara birden çok yerde kayıtlıysa hangi işletme / rol seçimi */
.gs-liste { display: grid; gap: 8px; margin-bottom: .25rem; }
.gs-secenek { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 1px solid var(--ad-border); border-radius: 16px;
background: var(--ad-surface); color: var(--ad-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .14s; }
.gs-secenek:hover, .gs-secenek:focus-visible { border-color: color-mix(in srgb, var(--ad-primary) 45%, var(--ad-border)); box-shadow: 0 10px 24px rgba(var(--ad-primary-rgb), .14);
transform: translateY(-1px); outline: none; }
.gs-ikon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; color: #fff;
background: linear-gradient(150deg, var(--sis-1, var(--ad-primary)), var(--sis-2, var(--ad-primary))); box-shadow: 0 6px 14px rgba(var(--ad-primary-rgb), .25); }
.gs-metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.gs-metin b { font-size: 1rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-metin small { font-size: .8rem; color: var(--ad-muted); }
.gs-ok { flex: 0 0 auto; color: var(--ad-muted); }
.gs-yeni .gs-ikon { background: var(--ad-surface-2); color: var(--ad-primary); box-shadow: none; border: 1px dashed color-mix(in srgb, var(--ad-primary) 45%, var(--ad-border)); }
.gs-askida { opacity: .72; }
.gs-durum { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
background: rgba(220, 38, 38, .1); color: var(--ad-danger); }
.dy-pencere .geri-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--ad-muted); margin-bottom: 1rem; }
.dy-pencere .geri-link:hover { color: var(--ad-primary); }