/* ==========================================================================
   GOURVA — Uygulama tasarım sistemi (Bootstrap 5.3 üzerine)
   Marka: #5B21C9 → #FF2E93 → #FFA41B. Degrade yalnızca vurgu anlarında.
   ========================================================================== */
:root {
    --app-violet: #5B21C9;
    --app-violet-600: #4c1aae;
    --app-violet-50: #f3eefd;
    --app-violet-100: #e7dcfb;
    --app-pink: #FF2E93;
    --app-orange: #FFA41B;
    --app-gradient: linear-gradient(120deg, #5B21C9 0%, #FF2E93 58%, #FFA41B 100%);

    --app-plum: #1d1036;
    --app-plum-2: #2a1650;
    --app-gradient-soft: linear-gradient(120deg, #f1e8ff 0%, #ffe6f3 55%, #fff1df 100%);
    --app-gradient-vp: linear-gradient(135deg, #6b2fe0 0%, #5B21C9 45%, #c2228f 100%);

    --app-ink: #1d1036;
    --app-text: #4a4263;
    --app-muted: #8b84a3;
    --app-line: #ece5f6;
    --app-line-strong: #ddd3ee;
    --app-bg: #faf7fd;
    --app-card: #ffffff;
    --app-success: #0f9d58;
    --app-danger: #e5484d;
    --app-warning: #c27c0e;

    --app-radius: 16px;
    --app-radius-sm: 12px;
    --app-shadow: 0 1px 2px rgba(26, 21, 48, .04), 0 4px 16px rgba(26, 21, 48, .04);
    --app-shadow-lg: 0 24px 60px rgba(26, 21, 48, .14);

    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--app-text);
    --bs-body-bg: var(--app-bg);
    --bs-border-color: var(--app-line);
    --bs-primary: #5B21C9;
    --bs-primary-rgb: 91, 33, 201;
    --bs-link-color: #5B21C9;
    --bs-link-color-rgb: 91, 33, 201;
    --bs-link-hover-color: #4c1aae;
    --bs-link-hover-color-rgb: 76, 26, 174;
    --bs-emphasis-color: var(--app-ink);
    --bs-heading-color: var(--app-ink);
    --bs-focus-ring-color: rgba(91, 33, 201, .18);
}

body {
    font-size: 14.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(900px 520px at -10% -10%, rgba(91, 33, 201, .09), transparent 60%),
        radial-gradient(800px 480px at 110% -5%, rgba(255, 46, 147, .08), transparent 60%),
        radial-gradient(700px 500px at 50% 120%, rgba(255, 164, 27, .07), transparent 60%),
        var(--app-bg);
    background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
::selection { background: var(--app-violet-100); }

.ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; display: inline-block; vertical-align: middle; font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24; -webkit-font-smoothing: antialiased; user-select: none; }
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 450, 'GRAD' 0, 'opsz' 24; }
.text-muted { color: var(--app-muted) !important; }
.text-ink { color: var(--app-ink) !important; }
.text-gradient { background: var(--app-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Butonlar ------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-font-size: 14.5px; --bs-btn-line-height: 1.4; --bs-btn-border-radius: var(--app-radius-sm); --bs-btn-padding-y: .58rem; --bs-btn-padding-x: 1.05rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .8rem; --bs-btn-border-radius: 10px; font-size: 13.5px; }
.btn-lg { --bs-btn-padding-y: .78rem; --bs-btn-padding-x: 1.35rem; --bs-btn-font-size: 15.5px; }
.btn .ms { font-size: 18px; margin-left: -2px; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-border-color: transparent; background: var(--app-gradient-vp); background-size: 160% 100%; background-position: 0 0; box-shadow: 0 8px 20px rgba(91, 33, 201, .28); transition: background-position .3s ease, box-shadow .2s ease, transform .15s; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--app-gradient-vp); background-size: 160% 100%; background-position: 100% 0; box-shadow: 0 10px 24px rgba(194, 34, 143, .3); }
.btn-primary:active { transform: translateY(1px); background: var(--app-gradient-vp) !important; }
.btn-primary:disabled { background: var(--app-gradient-vp); opacity: .6; }
.btn-brand { color: #fff; border: 0; background: var(--app-gradient); background-size: 140% 100%; background-position: 0 0; box-shadow: 0 10px 24px rgba(255, 46, 147, .25); transition: background-position .35s ease, transform .15s ease, box-shadow .2s; }
.btn-brand:hover, .btn-brand:focus { color: #fff; background-position: 100% 0; box-shadow: 0 12px 28px rgba(255, 46, 147, .32); }
.btn-brand:active { transform: translateY(1px); color: #fff; }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--app-line-strong); --bs-btn-color: var(--app-ink); --bs-btn-hover-bg: #f6f4fa; --bs-btn-hover-border-color: var(--app-line-strong); --bs-btn-active-bg: #efecf5; }
.btn-ghost { --bs-btn-color: var(--app-text); --bs-btn-hover-bg: #f1eff6; --bs-btn-hover-color: var(--app-ink); --bs-btn-active-bg: #e9e6f1; border: 0; }
.btn-soft { --bs-btn-color: var(--app-violet); --bs-btn-bg: var(--app-violet-50); --bs-btn-hover-bg: var(--app-violet-100); --bs-btn-hover-color: var(--app-violet-600); --bs-btn-active-bg: var(--app-violet-100); border: 0; }
.btn-danger-soft { --bs-btn-color: var(--app-danger); --bs-btn-bg: #fdeeee; --bs-btn-hover-bg: #fbdcdd; --bs-btn-hover-color: #c4282d; border: 0; }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 10px; }
.btn-icon.btn-sm { width: 32px; height: 32px; }

/* --- Form ----------------------------------------------------------------- */
.form-label { font-size: 13px; font-weight: 600; color: #3b3352; margin-bottom: .5rem; line-height: 1.4; }
.form-control, .form-select { border-radius: var(--app-radius-sm); border-color: var(--app-line-strong); padding: .62rem .9rem; font-size: 14.5px; line-height: 1.45; color: var(--app-ink); background-color: #fff; transition: border-color .15s, box-shadow .15s; }
.form-control::placeholder { color: #aaa6b8; }
.form-control:focus, .form-select:focus { border-color: var(--app-violet); box-shadow: 0 0 0 4px rgba(91, 33, 201, .12); }
.form-control-sm, .form-select-sm { padding: .45rem .7rem; font-size: 14px; border-radius: 10px; }
.form-control.is-invalid { border-color: var(--app-danger); background-image: none; padding-right: .95rem; }
.invalid-feedback { font-size: 13px; color: var(--app-danger); }
.form-text { color: var(--app-muted); font-size: 12.5px; }
.input-group-text { border-radius: var(--app-radius-sm); border-color: var(--app-line-strong); background: #f7f5fb; color: var(--app-muted); font-weight: 600; }
.form-check-input:checked { background-color: var(--app-violet); border-color: var(--app-violet); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(91, 33, 201, .12); border-color: var(--app-violet); }
/* Anahtar: yazıyla dikeyde ortalı, arada nefes payı */
.form-switch { display: flex; align-items: center; gap: .7rem; padding-left: 0; min-height: 0; margin: 0; }
.form-switch .form-check-input { float: none; margin: 0; flex: none; width: 2.5em; height: 1.4em; cursor: pointer; }
.form-switch .form-check-label { cursor: pointer; line-height: 1.3; }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a98be8'/%3e%3c/svg%3e"); }

.pw-field { position: relative; }
.pw-field .form-control { padding-right: 3rem; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--app-muted); width: 38px; height: 38px; border-radius: 10px; }
.pw-toggle:hover { background: #f3f1f8; color: var(--app-ink); }

/* --- Kart ----------------------------------------------------------------- */
.app-card { background: var(--app-card); border: 1px solid var(--app-line); border-radius: var(--app-radius); box-shadow: var(--app-shadow); }
.app-card-head { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.4rem; border-bottom: 1px solid var(--app-line); font-weight: 700; font-size: 14.5px; color: var(--app-ink); }
.app-card-head > .ms, .app-card-head > span > .ms:first-child { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 18px; color: #fff; background: var(--app-gradient-vp); box-shadow: 0 4px 10px rgba(91, 33, 201, .25); flex: none; }
.app-card-body { padding: 1.4rem; }

.badge-soft { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f1eff6; color: var(--app-text); }
.badge-soft.success { background: #e7f6ee; color: var(--app-success); }
.badge-soft.muted { background: #f1eff6; color: var(--app-muted); }
.badge-soft.violet { background: var(--app-violet-50); color: var(--app-violet); }
.badge-soft .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Üst bar (panel) -------------------------------------------------------- */
.app-topbar { position: sticky; top: 0; z-index: 1020; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--app-line); }
.app-topbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--app-gradient); }
.app-topbar-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.app-logo img { height: 30px; width: auto; display: block; }
.app-topbar-inner { position: relative; }
.app-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; background: #f6f2fc; border: 1px solid var(--app-line); border-radius: 14px; }
.app-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--app-text); text-decoration: none; transition: background .15s, color .15s; }
.app-nav a .ms { font-size: 19px; }
.app-nav a:hover { color: var(--app-ink); background: rgba(255, 255, 255, .7); }
.app-nav a.active { background: #fff; color: var(--app-violet); box-shadow: 0 2px 8px rgba(29, 16, 54, .08); }
@media (max-width: 767px) { .app-nav { position: static; transform: none; } .app-nav a { padding: 7px 10px; } .app-nav a .ms { display: none; } }
.user-btn.active { background: #f1eff6; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--app-gradient); }
.user-btn { display: inline-flex; align-items: center; gap: .6rem; border: 0; background: none; padding: 4px 8px 4px 4px; border-radius: 999px; color: var(--app-ink); font-weight: 600; font-size: 14px; }
.user-btn:hover { background: #f1eff6; }
.dropdown-menu { border-color: var(--app-line); border-radius: 14px; box-shadow: var(--app-shadow-lg); padding: .4rem; font-size: 14px; }
.dropdown-item { border-radius: 9px; padding: .55rem .75rem; display: flex; align-items: center; gap: .6rem; color: var(--app-ink); }
.dropdown-item:active { background: var(--app-violet-50); color: var(--app-violet); }
.dropdown-item .ms { font-size: 19px; color: var(--app-muted); }
.dropdown-item.text-danger .ms { color: var(--app-danger); }

/* --- Giriş / kayıt ---------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.auth-main { display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px); background: #fff; }
.auth-form { width: 100%; max-width: 420px; margin: auto; padding: 32px 0; }
.auth-form h1 { font-size: 30px; margin-bottom: .5rem; letter-spacing: -.02em; }
.auth-form .lead-sm { color: var(--app-muted); margin-bottom: 1.8rem; }
.auth-foot { font-size: 13px; color: var(--app-muted); text-align: center; }
.auth-switch { text-align: center; margin-top: 1.4rem; font-size: 14.5px; color: var(--app-text); }
.auth-switch a { font-weight: 700; text-decoration: none; }
.alert-app { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--app-radius-sm); font-size: 14px; background: #fdeeee; color: #a3262b; border: 1px solid #f7d4d5; }
.alert-app .ms { font-size: 20px; }
.auth-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; color: #fff; background: var(--app-gradient-vp); box-shadow: 0 10px 24px rgba(91, 33, 201, .25); }
.auth-icon .ms { font-size: 28px; }
.auth-icon.warn { background: #fff6e5; color: #c27c0e; box-shadow: none; }
.verify-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 16px; border-radius: 14px; background: #fff6e5; border: 1px solid #f6e2b8; color: #8a5a00; font-size: 14px; }
.verify-bar > .ms { font-size: 22px; }
.verify-bar form { margin-left: auto; }

.auth-side { display: none; position: relative; overflow: hidden; background: #160d33; color: #fff; padding: 56px; }
@media (min-width: 992px) { .auth-side { display: flex; flex-direction: column; justify-content: space-between; } }
.auth-side::before, .auth-side::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; }
.auth-side::before { width: 520px; height: 520px; background: #5B21C9; top: -160px; right: -120px; }
.auth-side::after { width: 420px; height: 420px; background: #FF2E93; bottom: -160px; left: -80px; opacity: .55; }
.auth-side > * { position: relative; z-index: 1; }
.auth-side h2 { color: #fff; font-size: clamp(30px, 3vw, 42px); line-height: 1.12; letter-spacing: -.03em; max-width: 520px; }
.auth-side h2 em { font-style: normal; background: linear-gradient(90deg, #ff8ac4, #FFA41B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; color: rgba(255, 255, 255, .82); font-size: 15px; }
.auth-points li { display: flex; gap: 12px; align-items: center; }
.auth-points .ms { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-size: 19px; color: #fff; }
.auth-stage { display: flex; justify-content: center; align-items: flex-end; gap: 22px; margin-top: 36px; }
.mock-phone { width: 248px; height: 500px; padding: 9px; border-radius: 40px; background: #0b0910; box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08); flex: none; }
.mock-phone .screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #fff; position: relative; }
.mock-phone iframe { position: absolute; top: 0; left: 0; width: 375px; height: 730px; border: 0; transform: scale(.6085); transform-origin: 0 0; pointer-events: none; }
.mock-phone.back { transform: translateY(-34px) rotate(-5deg); opacity: .9; }
@media (max-width: 1280px) { .mock-phone.back { display: none; } }

/* --- Sayfa başlığı -------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin: 36px 0 26px; }
.page-head h1 { font-size: 28px; margin: 0; }
.page-head p { margin: .35rem 0 0; color: var(--app-muted); }

/* --- Menü kartları (panel) ------------------------------------------------- */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; padding-bottom: 60px; }
.menu-card { overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.menu-card:hover { transform: translateY(-3px); box-shadow: var(--app-shadow-lg); }
.menu-thumb { position: relative; height: 230px; overflow: hidden; background: linear-gradient(180deg, #f3eefd, #fdf0f6); display: flex; justify-content: center; padding-top: 22px; }
.menu-thumb .mini-phone { width: 190px; height: 330px; border-radius: 28px; padding: 6px; background: #0b0910; box-shadow: 0 18px 40px rgba(26, 21, 48, .25); }
.menu-thumb .mini-phone .screen { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; position: relative; background: #fff; }
.menu-thumb iframe { position: absolute; top: 0; left: 0; width: 375px; height: 700px; border: 0; transform: scale(.4747); transform-origin: 0 0; pointer-events: none; }
.menu-thumb > a { position: absolute; inset: 0; z-index: 2; }
.menu-card-body { padding: 1.15rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; flex: 1; }
.menu-card-title { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.menu-card-title h3 { font-size: 16px; margin: 0; line-height: 1.3; }
.menu-client { display: inline-block; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; color: var(--app-violet); background: var(--app-violet-50); border-radius: 6px; padding: 1px 7px; }
.menu-card-title .min-w-0 { min-width: 0; flex: 1; }
.menu-card-url { font-size: 12.5px; color: var(--app-muted); text-decoration: none; display: flex; align-items: center; gap: .25rem; max-width: 100%; margin-top: 2px; }
.menu-card-url .u { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-card-url:hover { color: var(--app-violet); }
.menu-card-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: 13px; color: var(--app-muted); }
.menu-card-meta span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.menu-card-meta .ms { font-size: 17px; }
.menu-card-actions { display: flex; gap: .5rem; margin-top: auto; }
.menu-card-actions .btn-primary { flex: 1; }
.new-card { border: 2px dashed var(--app-line-strong); background: transparent; box-shadow: none; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; color: var(--app-text); text-decoration: none; border-radius: var(--app-radius); transition: border-color .2s, background .2s; }
.new-card:hover { border-color: var(--app-violet); background: var(--app-violet-50); color: var(--app-violet); }
.new-card .plus { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--app-gradient); color: #fff; box-shadow: 0 10px 24px rgba(255, 46, 147, .25); }
.new-card .plus .ms { font-size: 28px; }

.empty-hero { text-align: center; padding: 70px 20px 90px; max-width: 560px; margin: 0 auto; }
.empty-hero .art { width: 96px; height: 96px; border-radius: 28px; margin: 0 auto 22px; display: grid; place-items: center; background: var(--app-gradient); color: #fff; box-shadow: 0 18px 40px rgba(255, 46, 147, .28); }
.empty-hero .art .ms { font-size: 46px; }
.empty-hero h2 { font-size: 26px; }
.empty-hero p { color: var(--app-muted); margin-bottom: 1.6rem; }

/* --- Yeni menü akışı ------------------------------------------------------- */
.wizard-steps { display: flex; align-items: center; gap: .6rem; font-size: 13px; font-weight: 600; color: var(--app-muted); }
.wizard-steps .step { display: inline-flex; align-items: center; gap: .45rem; }
.wizard-steps .num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #ece9f3; color: var(--app-muted); font-size: 12px; }
.wizard-steps .step.active { color: var(--app-ink); }
.wizard-steps .step.active .num { background: var(--app-violet); color: #fff; }
.wizard-steps .step.done .num { background: var(--app-success); color: #fff; }
.wizard-steps .bar { width: 36px; height: 2px; background: #e4e0ee; border-radius: 2px; }

.name-step { max-width: 620px; margin: 9vh auto 0; text-align: center; padding: 0 16px; }
.name-step h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; }
.name-step p { color: var(--app-muted); font-size: 16px; }
.name-input { font-size: 22px !important; font-weight: 600; text-align: center; padding: 1rem 1.2rem !important; border-radius: 16px !important; }
.name-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.name-hints button { border: 1px solid var(--app-line-strong); background: #fff; border-radius: 999px; padding: .35rem .85rem; font-size: 13px; color: var(--app-text); }
.name-hints button:hover { border-color: var(--app-violet); color: var(--app-violet); }
.preset-theme { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 22px auto 0; padding: 8px 14px; border-radius: 12px; background: var(--app-violet-50); color: var(--app-text); font-size: 14px; }
.preset-theme .ms { color: var(--app-violet); font-size: 19px; }
.preset-theme strong { color: var(--app-ink); }
.preset-theme .btn-link { font-weight: 600; text-decoration: none; margin-left: 4px; }

.theme-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; padding-bottom: 130px; }
.theme-option { border: 0; background: none; padding: 0; text-align: left; }
.theme-option .phone { width: 100%; aspect-ratio: 375 / 760; border-radius: 34px; padding: 8px; background: #0b0910; box-shadow: 0 18px 40px rgba(26, 21, 48, .18); transition: transform .2s ease, box-shadow .2s ease, outline-color .2s; outline: 3px solid transparent; outline-offset: 5px; }
.theme-option:hover .phone { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(26, 21, 48, .24); }
.theme-option.selected .phone { outline-color: var(--app-violet); }
.theme-option .screen { position: relative; width: 100%; height: 100%; border-radius: 27px; overflow: hidden; background: #fff; }
.theme-option iframe { position: absolute; top: 0; left: 0; width: 375px; height: 744px; border: 0; transform-origin: 0 0; pointer-events: none; }
.theme-option .info { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 0 4px; }
.theme-option .info h3 { font-size: 16px; margin: 0; }
.theme-option .check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--app-line-strong); display: grid; place-items: center; color: transparent; transition: all .15s; }
.theme-option.selected .check { background: var(--app-violet); border-color: var(--app-violet); color: #fff; }
.theme-option .check .ms { font-size: 17px; }
.theme-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 8px; padding: 0 4px; }
.theme-tags span { font-size: 11.5px; font-weight: 600; color: var(--app-muted); background: #f1eff6; border-radius: 999px; padding: .2rem .55rem; }

.sticky-action { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: 14px 0; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-top: 1px solid var(--app-line); transform: translateY(110%); transition: transform .3s ease; }
.sticky-action.show { transform: none; }

/* --- Toast ---------------------------------------------------------------- */
.toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.app-toast { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1rem; border-radius: 12px; background: #1a1530; color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--app-shadow-lg); animation: toast-in .25s ease; pointer-events: auto; }
.app-toast .ms { font-size: 19px; }
.app-toast.success .ms { color: #4ade80; }
.app-toast.error { background: #a3262b; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* --- Modal ---------------------------------------------------------------- */
.modal-content { border: 0; border-radius: 20px; box-shadow: var(--app-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--app-line); padding: 1.1rem 1.4rem; }
.modal-title { font-size: 18px; font-weight: 700; }
.modal-body { padding: 1.4rem; }
.modal-footer { border-top: 1px solid var(--app-line); padding: .9rem 1.4rem; }
.modal-backdrop.show { opacity: .4; }

/* --- Panel üst bandı -------------------------------------------------------- */
.dash-hero { position: relative; overflow: hidden; background: var(--app-plum); color: #fff; padding: 44px 0 48px; }
.dash-hero-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; }
.dash-hero::before, .dash-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.dash-hero::before { width: 520px; height: 520px; right: -120px; top: -260px; background: #5B21C9; opacity: .9; }
.dash-hero::after { width: 460px; height: 380px; left: 30%; top: 40px; background: #FF2E93; opacity: .35; }
.dash-hero .glow-orange { position: absolute; width: 320px; height: 320px; left: -80px; bottom: -200px; border-radius: 50%; background: #FFA41B; filter: blur(90px); opacity: .45; pointer-events: none; }
.dash-hero .container-xl { position: relative; z-index: 1; }
.dash-hero .eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: .3rem .75rem; margin-bottom: 14px; }
.dash-hero h1 { color: #fff; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.dash-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ff8ac4, #FFA41B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-hero p { color: rgba(255, 255, 255, .72); margin: .7rem 0 0; max-width: 560px; }
.dash-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.dash-stats div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px 18px; min-width: 104px; }
.dash-stats strong { display: block; font-size: 24px; color: #fff; line-height: 1.15; }
.dash-stats span { font-size: 12.5px; color: rgba(255, 255, 255, .65); }
.dash-body { position: relative; padding-top: 32px; }
.dash-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.dash-section-head h2 { font-size: 20px; margin: 0; }
.dash-body .menu-card { border: 1px solid var(--app-line); box-shadow: 0 8px 24px rgba(29, 16, 54, .07); }
.menu-thumb { background: var(--app-gradient-soft); }
.new-card { background: #fff; }
.empty-card { background: #fff; border-radius: 22px; box-shadow: 0 14px 40px rgba(29, 16, 54, .12); }

/* --- Uyarı (sarı) / başarı (yeşil) ------------------------------------------ */
.alert-app.warn { background: #fff6e5; color: #8a5a00; border-color: #f6e2b8; }
.alert-app.ok { background: #e9f8f0; color: #0b7a45; border-color: #c7ecd9; }

/* --- Kart altı ve form satırı ----------------------------------------------- */
.app-card-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.4rem; border-top: 1px solid var(--app-line); background: #fcfafe; border-radius: 0 0 var(--app-radius) var(--app-radius); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
@media (max-width: 767px) { .form-row-2 { grid-template-columns: 1fr; } }

/* --- Ana sayfa (Canva tarzı açık karşılama) --------------------------------- */
.home { padding-bottom: 64px; }
.home-hero { position: relative; margin: 28px 0 34px; padding: 44px 24px 34px; text-align: center; border-radius: 28px; overflow: hidden;
    background:
        radial-gradient(420px 220px at 12% 0%, rgba(91, 33, 201, .16), transparent 70%),
        radial-gradient(420px 240px at 88% 10%, rgba(255, 46, 147, .14), transparent 70%),
        radial-gradient(520px 240px at 50% 120%, rgba(255, 164, 27, .16), transparent 70%),
        #fff;
    border: 1px solid var(--app-line); box-shadow: 0 10px 30px rgba(29, 16, 54, .05); }
.home-hero.compact { padding-bottom: 38px; }
.home-hello { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--app-text); }
.home-hello .ms { font-size: 19px; color: var(--app-violet); }
.home-hero h1 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.home-hero h1 em { font-style: normal; background: var(--app-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-sub { max-width: 620px; margin: 12px auto 0; color: var(--app-muted); }
.home-search { display: flex; align-items: center; gap: 10px; max-width: 620px; margin: 24px auto 0; padding: 0 18px; height: 54px; border-radius: 16px; background: #fff; border: 1.5px solid var(--app-line-strong); box-shadow: 0 6px 18px rgba(29, 16, 54, .06); cursor: text; transition: border-color .15s, box-shadow .15s; }
.home-search:focus-within { border-color: var(--app-violet); box-shadow: 0 0 0 4px rgba(91, 33, 201, .12); }
.home-search .ms { color: var(--app-muted); font-size: 22px; }
.home-search input { flex: 1; border: 0; outline: none; background: none; font-size: 15.5px; color: var(--app-ink); }
.quick-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 28px; }
.quick { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; text-decoration: none; color: var(--app-text); }
.quick-ico { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px rgba(29, 16, 54, .16); transition: transform .18s ease, box-shadow .18s ease; }
.quick-ico .ms { font-size: 26px; }
.quick-ico.brand { background: var(--app-gradient); }
.quick-ico.thumb { background-size: cover; background-position: center; border: 3px solid #fff; outline: 1px solid var(--app-line); }
.quick-ico.soft { background: #fff; color: var(--app-violet); border: 1px solid var(--app-line-strong); box-shadow: 0 4px 12px rgba(29, 16, 54, .06); }
.quick:hover .quick-ico { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(29, 16, 54, .22); }
.quick-lbl { font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; }
.quick:hover .quick-lbl { color: var(--app-ink); }
.home-stats { font-size: 13px; color: var(--app-muted); }
.home .dash-section-head { margin-top: 4px; }

/* --- Sayfa bandı (Temalar) -------------------------------------------------- */
.page-hero { padding: 40px 0 44px; }

/* --- Tema kategorisi filtresi ----------------------------------------------- */
.cat-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -6px 0 30px; }
.cat-filter a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; border: 1.5px solid var(--app-line-strong); color: var(--app-text); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, box-shadow .15s; }
.cat-filter a:first-child { padding-left: 12px; }
.cat-filter a .ms { font-size: 18px; color: var(--app-violet); }
.cat-filter .cat-thumb { width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: center; flex: none; }
.cat-filter .n { font-size: 12px; font-weight: 600; color: var(--app-muted); background: #f4f0fa; border-radius: 999px; padding: 1px 8px; }
.cat-filter a:hover { border-color: #c9b6f2; color: var(--app-ink); }
.cat-filter a.active { border-color: var(--app-violet); color: var(--app-violet); box-shadow: 0 0 0 4px rgba(91, 33, 201, .1); }
.cat-filter a.active .n { background: var(--app-violet); color: #fff; }

/* --- Temalar ---------------------------------------------------------------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; padding-bottom: 64px; }
.theme-card { overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--app-line); box-shadow: 0 8px 24px rgba(29, 16, 54, .07); transition: transform .2s ease, box-shadow .2s ease; }
.theme-card:hover { transform: translateY(-3px); box-shadow: var(--app-shadow-lg); }
.theme-card-stage { position: relative; display: flex; justify-content: center; width: 100%; padding: 26px 0 0; height: 360px; overflow: hidden; border: 0; background: var(--app-gradient-soft); cursor: zoom-in; }
.theme-card-hover { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 8px); display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: rgba(29, 16, 54, .88); color: #fff; font-size: 13.5px; font-weight: 600; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.theme-card-hover .ms { font-size: 18px; }
.theme-card-stage:hover .theme-card-hover, .theme-card-stage:focus-visible .theme-card-hover { opacity: 1; transform: translate(-50%, 0); }

/* --- Tema önizleme penceresi ------------------------------------------------ */
.theme-modal .modal-dialog { max-width: 880px; }
.theme-modal .modal-content { overflow: hidden; background:
    radial-gradient(320px 320px at 10% 15%, rgba(91, 33, 201, .22), transparent 70%),
    radial-gradient(320px 320px at 40% 100%, rgba(255, 164, 27, .2), transparent 70%),
    #f6f0fc; }
.tp-close { position: absolute; top: 16px; right: 16px; z-index: 5; }
.tp-body { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.tp-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 28px 64px; }
.tp-phone { width: 395px; height: min(800px, calc(100vh - 110px)); padding: 10px; border-radius: 48px; background: #0b0910; box-shadow: 0 30px 70px rgba(26, 21, 48, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.tp-phone .screen { position: relative; width: 375px; height: 100%; border-radius: 38px; overflow: hidden; background: #fff; }
.tp-phone iframe { display: block; width: 375px; height: 100%; border: 0; }
.tp-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; color: var(--app-violet); }
.tp-loading[hidden] { display: none; }
.tp-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--app-line); background: #fff; color: var(--app-ink); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(29, 16, 54, .12); transition: transform .15s, color .15s; }
.tp-nav:hover { color: var(--app-violet); transform: translateY(-50%) scale(1.06); }
.tp-nav.prev { left: 12px; }
.tp-nav.next { right: 12px; }
.tp-info { display: flex; flex-direction: column; gap: 16px; padding: 56px 36px 32px 8px; }
.tp-eyebrow { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--app-violet); background: #fff; border: 1px solid var(--app-line); border-radius: 999px; padding: 4px 10px; }
.tp-eyebrow .ms { font-size: 16px; }
.tp-info h3 { font-size: 28px; margin: 0; letter-spacing: -.02em; }
.tp-info p { margin: 0; font-size: 14px; }
.tp-points { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 10px; font-size: 13.5px; color: var(--app-text); }
.tp-points li { display: flex; gap: 10px; align-items: center; }
.tp-points .ms { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--app-violet); font-size: 18px; box-shadow: 0 2px 6px rgba(29, 16, 54, .06); flex: none; }
.tp-info .btn-brand { margin-top: auto; }
.tp-open { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--app-muted); text-decoration: none; }
.tp-open .ms { font-size: 16px; }
.tp-open:hover { color: var(--app-violet); }
@media (max-width: 860px) {
    .theme-modal .modal-dialog { max-width: 440px; }
    .tp-body { grid-template-columns: 1fr; }
    .tp-stage { padding: 20px 10px 8px; }
    .tp-phone { width: 100%; max-width: 395px; }
    .tp-phone .screen, .tp-phone iframe { width: 100%; }
    .tp-nav { display: none; }
    .tp-info { padding: 12px 22px 24px; }
}
.theme-card-phone { width: 210px; height: 430px; padding: 7px; border-radius: 32px; background: #0b0910; box-shadow: 0 18px 40px rgba(26, 21, 48, .25); flex: none; }
.theme-card-phone .screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #fff; }
.theme-card-phone iframe { position: absolute; top: 0; left: 0; width: 375px; height: 742px; border: 0; transform: scale(.5227); transform-origin: 0 0; pointer-events: none; }
.theme-card-body { padding: 1.15rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.theme-card-body h3 { font-size: 17px; margin: 0; }
.theme-feature-list { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-feature-list > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: #f4f0fa; color: var(--app-text); font-size: 12px; font-weight: 500; }
.theme-feature-list .ms { font-size: 15px; color: var(--app-violet); }
.theme-card-actions { display: flex; gap: .5rem; margin-top: auto; }
.theme-card-actions .btn-primary { flex: 1; }

/* --- Profil ----------------------------------------------------------------- */
.profile-page { padding-bottom: 64px; }
.profile-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 991px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-summary { overflow: hidden; position: sticky; top: 92px; }
.profile-cover { height: 84px; background: var(--app-gradient); }
.profile-id { text-align: center; padding: 0 1.25rem 1.1rem; margin-top: -40px; }
.avatar-xl { width: 80px; height: 80px; font-size: 26px; margin: 0 auto 12px; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(29, 16, 54, .15); }
.profile-id h2 { font-size: 18px; margin: 0 0 2px; }
.profile-id p { margin: 0; font-size: 13.5px; color: var(--app-muted); word-break: break-word; }
.profile-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--app-line); border-bottom: 1px solid var(--app-line); }
.profile-facts div { text-align: center; padding: 14px 8px; }
.profile-facts div + div { border-left: 1px solid var(--app-line); }
.profile-facts dt { font-size: 12px; font-weight: 500; color: var(--app-muted); }
.profile-facts dd { margin: 0; font-size: 22px; font-weight: 800; color: var(--app-ink); line-height: 1.2; }
.profile-meta { list-style: none; margin: 0; padding: 14px 1.25rem 16px; display: grid; gap: 8px; font-size: 13px; color: var(--app-text); }
.profile-meta li { display: flex; align-items: center; gap: 8px; }
.profile-meta .ms { font-size: 18px; color: var(--app-muted); }
.profile-forms { display: grid; gap: 24px; }

/* --- Hata sayfaları --------------------------------------------------------- */
.state-page { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px; }
.state-page .code { font-size: 88px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }