/* ============================================================ BİROTEL — Ortak Tasarım Sistemi v2 (Kurumsal) Biryerden tasarım dili örnek alınmıştır: - Açık mod (varsayılan): #f4f6f9 tuval, beyaz yüzeyler, ince kenarlık - Koyu mod: ile #111827 tek tip yüzey Tema, bus.js tarafından localStorage("bo-theme") ile uygulanır. ============================================================ */ :root { /* Tuval & yüzeyler (biryerden token'ları) */ --bg: #f4f6f9; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f8fafc; --panel: #ffffff; --panel-2: #f1f5f9; --line: #e2e8f0; --text: #0f172a; --muted: #64748b; /* Kurumsal marka renkleri */ --primary: #2563eb; --primary-2: #4f46e5; --grad: linear-gradient(135deg, #2563eb, #4f46e5); --gold: #b45309; --gold-2: #d97706; --teal: #0d9488; --blue: #2563eb; --violet: #7c3aed; --rose: #e11d48; --green: #059669; --amber: #d97706; --red: #dc2626; --on-primary: #ffffff; --shadow: 0 10px 30px rgba(15, 23, 42, 0.08); --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.14); --chart-grid: rgba(15, 23, 42, 0.08); --chart-label: rgba(100, 116, 139, 0.95); --glow-1: transparent; --glow-2: transparent; --r: 16px; --r-sm: 12px; --tr: 0.25s cubic-bezier(0.4, 0, 0.2, 1); color-scheme: light; } html.dark { --bg: #0d1424; --bg-2: #111827; --surface: #111827; --surface-2: #1f2937; --panel: rgba(255, 255, 255, 0.045); --panel-2: rgba(255, 255, 255, 0.08); --line: rgba(255, 255, 255, 0.1); --text: #e8eefc; --muted: #94a3b8; --primary: #3b82f6; --primary-2: #6366f1; --grad: linear-gradient(135deg, #3b82f6, #6366f1); --gold: #e8b657; --gold-2: #f6d38b; --teal: #2dd4bf; --blue: #5b8cff; --violet: #a78bfa; --rose: #fb7185; --green: #34d399; --amber: #fbbf24; --red: #f87171; --on-primary: #ffffff; --shadow: 0 16px 44px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55); --chart-grid: rgba(255, 255, 255, 0.08); --chart-label: rgba(148, 163, 184, 0.95); --glow-1: radial-gradient(circle, #1d3althea, transparent 65%); color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background 0.3s, color 0.3s; } /* Koyu modda zarif arka plan ışıkları; açık modda kapalı */ body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(120px); opacity: 0; pointer-events: none; transition: opacity 0.5s; } /* Bloblar STATİK: blur(120px) katmanın sürekli transform animasyonu her karede yeniden boyanıp GPU'yu zorluyor ve tüm ekranı titretiyordu (jank). Parıltı duruyor. */ html.dark body::before { width: 50vw; height: 50vw; top: -18vw; right: -14vw; opacity: 0.3; background: radial-gradient(circle, #1e3a5f, transparent 65%); } html.dark body::after { width: 42vw; height: 42vw; bottom: -16vw; left: -10vw; opacity: 0.22; background: radial-gradient(circle, #312e81, transparent 65%); } @keyframes float1 { to { transform: translate(-5vw, 4vh) scale(1.12); } } @keyframes float2 { to { transform: translate(4vw, -5vh) scale(1.08); } } ::selection { background: rgba(37, 99, 235, 0.25); } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.55); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font: inherit; color: var(--text); } img { max-width: 100%; } h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; } .muted { color: var(--muted); } .gold { color: var(--gold); } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------- Giriş animasyonları ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { 0% { opacity: 0; transform: scale(0.93); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideRight { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); } 100% { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); } } .anim { animation: fadeUp 0.5s var(--tr) both; } .anim-d1 { animation-delay: 0.05s; } .anim-d2 { animation-delay: 0.1s; } .anim-d3 { animation-delay: 0.15s; } .anim-d4 { animation-delay: 0.2s; } .anim-d5 { animation-delay: 0.25s; } .anim-d6 { animation-delay: 0.3s; } /* İlk yüklemeden sonra yeniden çizimlerde giriş animasyonları oynamaz (titreme/zıplama engellenir) */ body.bo-hazir .anim, body.bo-hazir .anim-d1, body.bo-hazir .anim-d2, body.bo-hazir .anim-d3, body.bo-hazir .anim-d4, body.bo-hazir .anim-d5, body.bo-hazir .anim-d6 { animation: none !important; } /* ---------- Kartlar ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr), background 0.3s; } html.dark .card { background: var(--surface-2); box-shadow: none; } .card:hover { border-color: rgba(37, 99, 235, 0.35); } .card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .card h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* İstatistik kartı */ .stat { position: relative; overflow: hidden; } .stat .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: var(--panel-2); margin-bottom: 12px; } .stat .val { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; } .stat .lbl { color: var(--muted); font-size: 12.5px; margin-top: 3px; } .stat .trend { font-size: 11.5px; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; } .trend.up { color: var(--green); background: rgba(5, 150, 105, 0.1); } .trend.down { color: var(--red); background: rgba(220, 38, 38, 0.1); } /* ---------- Butonlar ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 11px; font-weight: 600; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); transition: all var(--tr); white-space: nowrap; } html.dark .btn { background: var(--panel-2); } .btn:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12); } .btn:active { transform: translateY(0); } .btn.primary { background: var(--grad); color: var(--on-primary); border: none; box-shadow: 0 5px 18px rgba(37, 99, 235, 0.3); } .btn.primary:hover { box-shadow: 0 8px 26px rgba(37, 99, 235, 0.42); } .btn.ghost { background: transparent; } .btn.danger { background: rgba(220, 38, 38, 0.08); color: var(--red); border-color: rgba(220, 38, 38, 0.28); } .btn.ok { background: rgba(5, 150, 105, 0.08); color: var(--green); border-color: rgba(5, 150, 105, 0.28); } .btn.sm { padding: 7px 13px; font-size: 12.5px; border-radius: 10px; } .btn.xs { padding: 4px 10px; font-size: 11.5px; border-radius: 8px; } .btn.block { width: 100%; } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* ---------- Rozetler ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 600; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.gray { color: var(--muted); background: rgba(100, 116, 139, 0.12); } .badge.green { color: var(--green); background: rgba(5, 150, 105, 0.1); } .badge.amber { color: var(--amber); background: rgba(217, 119, 6, 0.12); } .badge.red { color: var(--red); background: rgba(220, 38, 38, 0.1); } .badge.blue { color: var(--blue); background: rgba(37, 99, 235, 0.1); } .badge.violet { color: var(--violet); background: rgba(124, 58, 237, 0.1); } .badge.teal { color: var(--teal); background: rgba(13, 148, 136, 0.1); } .badge.gold { color: var(--gold); background: rgba(180, 83, 9, 0.12); } html.dark .badge.green { background: rgba(52, 211, 153, 0.13); } html.dark .badge.amber { background: rgba(251, 191, 36, 0.13); } html.dark .badge.red { background: rgba(248, 113, 113, 0.13); } html.dark .badge.blue { background: rgba(91, 140, 255, 0.14); } html.dark .badge.violet { background: rgba(167, 139, 250, 0.14); } html.dark .badge.teal { background: rgba(45, 212, 191, 0.13); } html.dark .badge.gold { background: rgba(232, 182, 87, 0.13); } .badge.pulse::before { animation: pulse 1.4s infinite; } /* ---------- Form ---------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .inp, .field input, .field select, .field textarea { width: 100%; padding: 10px 14px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); outline: none; transition: border-color var(--tr), box-shadow var(--tr); font-size: 14px; } .inp:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); background: var(--surface); } .field select option { background: var(--surface); color: var(--text); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ---------- Tablo ---------- */ .tbl-wrap { overflow-x: auto; border-radius: var(--r-sm); } table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl th { text-align: left; padding: 11px 14px; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); } html.dark .tbl th { background: transparent; } .tbl th:first-child { border-radius: 10px 0 0 0; } .tbl th:last-child { border-radius: 0 10px 0 0; } .tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl tbody tr { transition: background var(--tr); } .tbl tbody tr:hover { background: var(--surface-2); } html.dark .tbl tbody tr:hover { background: rgba(255, 255, 255, 0.04); } /* ---------- Modal ---------- */ .modal-bg { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(5px); align-items: center; justify-content: center; padding: 20px; } html.dark .modal-bg { background: rgba(2, 6, 18, 0.7); } .modal-bg.open { display: flex; animation: fadeIn 0.22s both; } .modal { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; animation: pop 0.3s var(--tr) both; box-shadow: var(--shadow-lg); } html.dark .modal { background: var(--surface-2); } .modal h3 { font-size: 18px; margin-bottom: 18px; } .modal .close { float: right; font-size: 20px; color: var(--muted); transition: color var(--tr); } .modal .close:hover { color: var(--red); } /* ---------- Toast ---------- */ #toasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 360px; } .toast { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 13px; padding: 13px 16px; font-size: 13.5px; box-shadow: var(--shadow-lg); animation: slideRight 0.32s var(--tr) both; display: flex; gap: 10px; align-items: flex-start; } html.dark .toast { background: var(--surface-2); } .toast.ok { border-left-color: var(--green); } .toast.err { border-left-color: var(--red); } .toast.info { border-left-color: var(--blue); } .toast .t-ico { font-size: 17px; } .toast .t-msg b { display: block; margin-bottom: 2px; } .toast.out { animation: fadeIn 0.3s reverse both; } /* ---------- Admin yerleşimi ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; padding: 20px 14px; display: flex; flex-direction: column; gap: 3px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; z-index: 50; transition: background 0.3s; } html.dark .sidebar { background: rgba(13, 20, 36, 0.85); backdrop-filter: blur(16px); } .sidebar .logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } .sidebar .logo .mark { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); display: grid; place-items: center; color: #fff; font-size: 18px; box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3); } .sidebar .rol-kutu { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); } html.dark .sidebar .rol-kutu { background: var(--panel); } .sidebar .rol-kutu .r-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font-size: 16px; } html.dark .sidebar .rol-kutu .r-ico { background: var(--panel-2); } .sidebar .rol-kutu b { display: block; font-size: 12.5px; } .sidebar .rol-kutu .muted { font-size: 10.5px; } .sidebar .grp { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; padding: 14px 12px 6px; font-weight: 700; } /* Açılır (accordion) menü grupları */ .nav-grp { margin-bottom: 2px; } .nav-grp { margin-top: 6px; } .nav-grp .grp-bas { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px 5px; font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; transition: color var(--tr); background: transparent !important; cursor: pointer; } .nav-grp .grp-bas:hover { color: var(--text); } .nav-grp .grp-bas .g-ad { flex: 1; text-align: left; } .nav-grp .grp-bas .g-ok { transition: transform var(--tr), opacity var(--tr); font-size: 9px; opacity: 0; } .nav-grp .grp-bas:hover .g-ok { opacity: 0.5; } .nav-grp.acik .grp-bas .g-ok { transform: rotate(180deg); } .nav-grp .grp-ic { display: none; padding-top: 2px; } .nav-grp.acik .grp-ic { display: block; animation: fadeIn 0.22s both; } .nav-grp .grp-ic .nav { margin-left: 4px; } .sidebar a.nav { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: all var(--tr); position: relative; } .sidebar a.nav:hover { color: var(--text); background: var(--surface-2); transform: translateX(3px); } html.dark .sidebar a.nav:hover { background: var(--panel-2); } .sidebar a.nav.active { color: var(--primary); background: rgba(37, 99, 235, 0.08); } html.dark .sidebar a.nav.active { color: #fff; background: rgba(59, 130, 246, 0.15); } .sidebar a.nav.active::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 99px; background: var(--primary); } .sidebar a.nav .n-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--rose); color: #fff; font-size: 11px; display: grid; place-items: center; } .main { flex: 1; padding: 24px 28px 60px; min-width: 0; } .topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; } .topbar h1 { font-size: 22px; } .topbar .sub { color: var(--muted); font-size: 13px; margin-top: 3px; } .topbar .spacer { flex: 1; } .icon-btn { width: 41px; height: 41px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-size: 17px; transition: all var(--tr); position: relative; } html.dark .icon-btn { background: var(--panel-2); } .icon-btn:hover { border-color: var(--primary); transform: translateY(-2px); } .icon-btn .dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); animation: pulse 1.5s infinite; } /* Izgara yardımcıları */ .grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); } .g6 { grid-template-columns: repeat(6, 1fr); } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .mt { margin-top: 16px; } .mb { margin-bottom: 16px; } /* Sekmeler */ .tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; } html.dark .tabs { background: var(--panel); } .tabs button { padding: 8px 15px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: all var(--tr); } .tabs button.active { background: var(--grad); color: var(--on-primary); box-shadow: 0 3px 12px rgba(37, 99, 235, 0.3); } .tabs button:not(.active):hover { color: var(--text); } /* Kanban */ .kanban { display: grid; gap: 14px; align-items: start; } .kanban .col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; min-height: 120px; } html.dark .kanban .col { background: var(--panel); } .kanban .col > h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 12px; display: flex; justify-content: space-between; } .kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px; margin-bottom: 10px; font-size: 13px; transition: all var(--tr); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } html.dark .kcard { background: var(--panel-2); box-shadow: none; } .kcard:hover { transform: translateY(-2px); border-color: rgba(37, 99, 235, 0.4); box-shadow: var(--shadow); } /* İlerleme çubuğu */ .bar { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width 0.8s cubic-bezier(0.4,0,0.2,1); } /* Boş durum */ .empty { text-align: center; padding: 40px 20px; color: var(--muted); } .empty .e-ico { font-size: 40px; margin-bottom: 10px; opacity: 0.6; } /* Tema anahtarı (yüzen — admin dışı sayfalarda) */ .theme-fab { position: fixed; left: 18px; bottom: 18px; z-index: 150; width: 44px; height: 44px; border-radius: 50%; font-size: 19px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow); transition: transform var(--tr); } .theme-fab:hover { transform: scale(1.1) rotate(15deg); } /* Sesli asistan düğmesi */ .mic-fab { position: fixed; right: 22px; bottom: 22px; z-index: 150; width: 56px; height: 56px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 23px; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(37, 99, 235, 0.4); transition: transform var(--tr); } .mic-fab:hover { transform: scale(1.08); } .mic-fab.listening { animation: ringPulse 1.2s infinite; } .mic-panel { position: fixed; right: 22px; bottom: 90px; z-index: 150; width: 340px; max-width: calc(100vw - 44px); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-lg); display: none; } html.dark .mic-panel { background: var(--surface-2); } .mic-panel.open { display: block; animation: pop 0.3s both; } .mic-panel .m-log { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .mic-msg { padding: 9px 13px; border-radius: 12px; font-size: 13px; max-width: 90%; animation: fadeUp 0.3s both; } .mic-msg.user { align-self: flex-end; background: var(--grad); color: #fff; } .mic-msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); } html.dark .mic-msg.bot { background: var(--panel-2); } /* ---------- Tam ekran detay sayfası (biryerden imar deseni) ---------- */ .detail-bg { position: fixed; inset: 0; z-index: 190; background: var(--bg); overflow-y: auto; animation: fadeIn 0.2s both; } .detail-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(15,23,42,0.05); } html.dark .detail-head { background: var(--surface-2); } .detail-head h2 { font-size: 19px; letter-spacing: -0.02em; } .detail-head .geri { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); transition: all var(--tr); } html.dark .detail-head .geri { background: var(--panel-2); } .detail-head .geri:hover { border-color: var(--primary); transform: translateX(-3px); } .detail-body { max-width: 1240px; margin: 0 auto; padding: 26px 28px 80px; animation: fadeUp 0.35s var(--tr) both; } .detail-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 24px; border-radius: var(--r); margin-bottom: 18px; background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(79,70,229,0.05)); border: 1px solid var(--line); } html.dark .detail-hero { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(99,102,241,0.06)); } .detail-hero .d-avatar { width: 74px; height: 74px; border-radius: 20px; background: var(--grad); display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #fff; box-shadow: 0 10px 26px rgba(37,99,235,0.3); flex-shrink: 0; } .detail-hero h2 { font-size: 24px; } .dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: 13.5px; } .dl dt { color: var(--muted); font-weight: 600; padding: 7px 0; } .dl dd { padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 600; } @media (max-width: 700px) { .detail-body { padding: 18px 14px 80px; } .dl { grid-template-columns: 120px 1fr; } } /* Profesyonel tam ekran FORM deseni (boş/seyrek ekran değil) */ .form-page { max-width: 1080px; margin: 0 auto; } .form-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; } @media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } } .form-card { padding: 24px; } .form-card h3 { font-size: 15px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .info-list { display: flex; flex-direction: column; gap: 10px; } .info-list .ii { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13px; } html.dark .info-list .ii { background: var(--panel); } .info-list .ii .k { font-size: 17px; } /* Canlı özet paneli (formun yanında dolu görünsün) */ .summary { position: sticky; top: 86px; } .summary .row-li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; } .summary .row-li b { font-weight: 700; } .summary .total { display: flex; justify-content: space-between; padding: 12px 0 0; font-size: 16px; font-weight: 800; } /* Otel haritası (vaziyet planı) kabuğu */ .map-wrap { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); } .map-search { position: relative; margin-bottom: 14px; } .map-search input { width: 100%; padding: 14px 18px 14px 46px; border-radius: 14px; font-size: 15px; box-shadow: var(--shadow); } .map-search .s-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--muted); } .poi-pin { cursor: pointer; transition: transform 0.2s; transform-origin: center bottom; } .poi-pin:hover { transform: scale(1.18); } .poi-pin.on > circle:first-child { animation: ringPulse 1.2s infinite; } .map-toolbar { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 5; } .map-legend { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); font-size: 11.5px; z-index: 5; } html.dark .map-legend { background: rgba(13,20,36,0.9); } /* ---------- Demo görsel sahneler (harici resim yok — CSS ile "otel fotoğrafı") ---------- */ .foto { position: relative; border-radius: 14px; overflow: hidden; display: grid; place-items: center; font-size: 40px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.35); min-height: 150px; } .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.28)); } .foto .cap { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-size: 13px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .foto-havuz { background: linear-gradient(160deg, #38bdf8 0%, #0ea5e9 45%, #0369a1 100%); } .foto-deniz { background: linear-gradient(160deg, #67e8f9 0%, #0891b2 50%, #155e75 100%); } .foto-oda { background: linear-gradient(160deg, #d6bfa2 0%, #a98467 55%, #6f4e37 100%); } .foto-suit { background: linear-gradient(160deg, #c4b5fd 0%, #8b5cf6 55%, #5b21b6 100%); } .foto-spa { background: linear-gradient(160deg, #6ee7b7 0%, #10b981 55%, #065f46 100%); } .foto-restoran { background: linear-gradient(160deg, #fda4af 0%, #f43f5e 55%, #9f1239 100%); } .foto-bar { background: linear-gradient(160deg, #fcd34d 0%, #f59e0b 55%, #b45309 100%); } .foto-lobi { background: linear-gradient(160deg, #94a3b8 0%, #475569 55%, #1e293b 100%); } .foto-plaj { background: linear-gradient(160deg, #fde68a 0%, #38bdf8 60%, #0369a1 100%); } .foto-fitness { background: linear-gradient(160deg, #93c5fd 0%, #3b82f6 55%, #1e3a8a 100%); } .foto-gunbatimi { background: linear-gradient(160deg, #fb923c 0%, #db2777 55%, #4c1d95 100%); } .foto-manzara { background: linear-gradient(160deg, #86efac 0%, #22c55e 40%, #0e7490 100%); } /* Yıldızlı gökyüzü / animasyonlu hero için */ .stars { position: absolute; inset: 0; overflow: hidden; } .stars i { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity: .7; animation: pulse 3s infinite; } /* Yükleme iskeleti */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 8px; } #sayfa-icerik > #icerik { animation: fadeUp 0.34s cubic-bezier(0.2,0.8,0.2,1) both; } /* Liste/panel çocuklarına TEK TEK giriş animasyonu YOK: render() her db:change'de innerHTML'i yeniden kurunca bu animasyon tekrar oynayıp ekranı titretiyordu. Sayfa girişi zaten #icerik üzerinden tek seferde yapılıyor. */ /* ===== Sağdan açılan Yan Panel (genel — CBS deseni) ===== */ .yp-ovl { position: fixed; inset: 0; z-index: 600; background: rgba(15,23,42,.4); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .3s; } html.dark .yp-ovl { background: rgba(2,6,18,.64); } .yp-ovl.acik { opacity: 1; visibility: visible; } .yan-panel { position: fixed; right: 0; top: 0; height: 100vh; width: 600px; max-width: 100vw; z-index: 601; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -24px 0 64px rgba(15,23,42,.2); transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; } html.dark .yan-panel { background: var(--bg); box-shadow: -28px 0 72px rgba(0,0,0,.6); } .yan-panel.acik { transform: translateX(0); } .yan-panel.genis { width: 880px; } .yan-panel.ustte { box-shadow: -34px 0 90px rgba(15,23,42,.28); } html.dark .yan-panel.ustte { box-shadow: -34px 0 96px rgba(0,0,0,.7); } @media (max-width: 940px) { .yan-panel.genis { width: 96vw; } } /* Dar/orta pencerede panel tam ekran otursun (kenarda şerit kalmasın) */ @media (max-width: 820px) { .yan-panel, .yan-panel.genis { width: 100vw; } } .yp-geri { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 16px; transition: all var(--tr); flex: none; } .yp-geri:hover { color: var(--primary); border-color: var(--primary); transform: translateX(-2px); } html.dark .yp-geri { background: var(--panel-2); } /* Backend bağlantı göstergesi (etiketli pill) */ .be-pill { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 700; transition: all var(--tr); white-space: nowrap; } html.dark .be-pill { background: var(--panel-2); } .be-pill:hover { border-color: var(--primary); color: var(--text); } .be-pill .be-ico { font-size: 13px; line-height: 1; } .be-pill.bagli { background: rgba(5,150,105,.12); border-color: rgba(5,150,105,.4); color: var(--green); } .be-pill.bagli .be-ico { animation: nabiz 1.6s ease-in-out infinite; } @keyframes nabiz { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } } @media (max-width: 720px) { .be-pill .be-txt { display: none; } .be-pill { padding: 0 11px; } } .yp-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); flex: none; } .yp-head h3 { flex: 1; font-size: 16px; } .yp-kapat { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 14px; transition: all var(--tr); } .yp-kapat:hover { color: var(--red); border-color: var(--red); transform: rotate(90deg); } .yp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; } /* Detay gövdesi çocuklarına giriş animasyonu YOK: panelin kendisi zaten kayarak açılıyor; sekme değişince gövde yeniden çizilince bu animasyon tekrar oynayıp titretiyordu. */ .yp-body .grid.g4 { grid-template-columns: repeat(2, 1fr); } .yp-body .grid.g2 { grid-template-columns: 1fr; } .yp-foot { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface); flex: none; flex-wrap: wrap; } .yp-foot .btn { flex: 1; min-width: 120px; } /* Yazdırma / çıktı — sidebar, butonlar, asistan gizlenir */ @media print { .sidebar, .mic-fab, .mic-panel, .theme-fab, .icon-btn, .btn, .topbar .spacer, #toasts { display: none !important; } .main { padding: 0 !important; } .layout { display: block !important; } body::before, body::after { display: none !important; } .card, .kcard { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; } body { background: #fff !important; color: #000 !important; } } .rapor-cikti { display: inline-flex; gap: 6px; } /* Duyarlılık */ @media (max-width: 1100px) { .g4, .g5, .g6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .sidebar { position: fixed; left: -260px; transition: left var(--tr); box-shadow: var(--shadow-lg); } .sidebar.open { left: 0; } .g3, .g4, .g5, .g6 { grid-template-columns: repeat(2, 1fr); } .main { padding: 18px 14px 70px; } .form-row { grid-template-columns: 1fr; } .kanban { grid-template-columns: 1fr !important; } .topbar h1 { font-size: 19px; } } @media (max-width: 600px) { .g2, .g3, .g4, .g5, .g6 { grid-template-columns: 1fr; } }