/* ═══════════════════════════════════════════════════════════════════════
   ACERLER HOLDING — ÇATI KOMUTA MERKEZİ
   Shared Stylesheet — Group Command Center Theme
   Tasarım dili Acerler BİMS + Nevsac AI taslağı temel alınarak kuruldu.
   ═══════════════════════════════════════════════════════════════════════ */

* { font-family: 'Inter', system-ui, sans-serif; }
html { scroll-behavior: smooth; }

::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #334155; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Ambient holding background ──────────────────────────── */
.holding-bg {
    background-color: #F1F5F9;
    background-image:
        radial-gradient(circle at 10% 6%,  rgba(37,99,235,.06), transparent 40%),
        radial-gradient(circle at 92% 12%, rgba(139,92,246,.05), transparent 42%),
        radial-gradient(circle at 84% 94%, rgba(16,185,129,.05), transparent 45%),
        radial-gradient(circle at 50% 60%, rgba(99,102,241,.03), transparent 60%);
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */
#mainSidebar {
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(180deg, #0B1224 0%, #0F172A 45%, #0B1224 100%);
}
@media (min-width: 1024px) { #mainSidebar { transform: translateX(0) !important; } }
.main-content { margin-left: 0; }
@media (min-width: 1024px) { .main-content { margin-left: 252px; } }

.sidebar-section-label {
    display: block; font-size: 9.5px; letter-spacing: 0.12em; font-weight: 700;
    color: #45536e; text-transform: uppercase; padding: 12px 14px 5px; user-select: none;
}
.nav-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-radius: 9px; cursor: pointer; transition: background .16s, transform .16s;
    border-left: 2px solid transparent; text-decoration: none; width: 100%;
    background: none; border-top: none; border-right: none; border-bottom: none;
    text-align: left; position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.055); }
.nav-item:hover .nav-label { color: #fff; }
.nav-item:hover .nav-icon  { color: #cbd5e1; }
.nav-active {
    background: linear-gradient(135deg, rgba(37,99,235,0.20) 0%, rgba(139,92,246,0.09) 100%) !important;
    border-left-color: #3b82f6 !important;
    box-shadow: inset 0 0 0 1px rgba(59,130,246,.12);
}
.nav-active .nav-label { color: #fff !important; }
.nav-active .nav-icon  { color: #60a5fa !important; filter: drop-shadow(0 0 5px rgba(96,165,250,.6)); }
.nav-label { font-size: 13px; font-weight: 500; color: #94a3b8; transition: color .14s; white-space: nowrap; }
.nav-icon  { width: 16px; height: 16px; flex-shrink: 0; color: #4b5b78; transition: color .14s, filter .14s; }

.sub-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 12px;
    border-radius: 8px; cursor: pointer; transition: background .14s;
    text-decoration: none; border-left: 2px solid transparent;
}
.sub-item:hover { background: rgba(255,255,255,0.045); }
.sub-item:hover .sub-label { color: #e2e8f0; }
.sub-item:hover .sub-dot   { background: #60a5fa; }
.sub-item.nav-active {
    background: linear-gradient(135deg, rgba(37,99,235,0.22) 0%, rgba(139,92,246,0.10) 100%) !important;
    border-left-color: #3b82f6 !important;
}
.sub-item.nav-active .sub-label { color: #fff !important; font-weight: 600; }
.sub-item.nav-active .sub-dot { background: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96,165,250,0.22); }
.nav-item.parent-active { background: rgba(255,255,255,0.05); }
.nav-item.parent-active .nav-label { color: #e2e8f0; }
.nav-item.parent-active .nav-icon  { color: #60a5fa; }
.sub-label { font-size: 12.5px; font-weight: 500; color: #64748b; transition: color .14s; }
.sub-dot { width: 5px; height: 5px; border-radius: 50%; background: #334155; flex-shrink: 0; margin-left: 4px; transition: background .14s; }

.dd-body { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.dd-body.open { max-height: 640px; }
.chevron { transition: transform 0.22s ease; }
.chevron.open { transform: rotate(180deg); }

.topbar-shadow { box-shadow: 0 1px 0 0 #e2e8f0, 0 2px 14px -4px rgba(15,23,42,0.07); }

/* ── AI Drawer ───────────────────────────────────────────── */
.ai-drawer { transform: translateX(100%); transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
.ai-drawer.open { transform: translateX(0); }
.drawer-shadow { box-shadow: -10px 0 44px -4px rgba(15,23,42,0.16); }
.backdrop { opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }
.backdrop.open { opacity: 1; pointer-events: all; }
.mob-overlay { opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.mob-overlay.open { opacity: 1; pointer-events: all; }

/* ═══════════════════════════════════════════════════════════
   HERO — Group command banner
   ═══════════════════════════════════════════════════════════ */
.holding-hero {
    background:
        radial-gradient(1200px 400px at 100% -10%, rgba(139,92,246,.25), transparent 60%),
        radial-gradient(900px 500px at -5% 120%, rgba(16,185,129,.18), transparent 55%),
        linear-gradient(135deg, #0B1224 0%, #111C34 46%, #1E3A8A 130%);
    position: relative; overflow: hidden;
}
.holding-hero::after {
    content:''; position:absolute; inset:0;
    background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,.10) 1px, transparent 0);
    background-size: 26px 26px; opacity:.5; pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════
   COMPANY CARDS
   ═══════════════════════════════════════════════════════════ */
.firm-card {
    position: relative; background:#fff; border:1px solid #E7ECF3; border-radius:22px;
    overflow:hidden; transition: transform .26s cubic-bezier(.4,0,.2,1), box-shadow .26s, border-color .26s;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.firm-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background: var(--firm-grad, linear-gradient(90deg,#2563EB,#6366F1)); opacity:.9;
}
.firm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -18px rgba(15,23,42,.28), 0 8px 20px -12px rgba(15,23,42,.12);
    border-color: transparent;
}
.firm-card.is-active { cursor:pointer; }
.firm-card.is-soon { opacity: .96; }
.firm-card .firm-arrow { transition: transform .24s ease, opacity .2s; opacity:0; transform: translateX(-4px); }
.firm-card:hover .firm-arrow { opacity:1; transform: translateX(0); }
.firm-glow {
    position:absolute; width:180px; height:180px; border-radius:50%;
    filter: blur(46px); opacity:.14; top:-40px; right:-30px; pointer-events:none;
    background: var(--firm-color, #2563EB);
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.82)} }
.pulse-dot { animation: pulse-dot 1.9s ease-in-out infinite; }

@keyframes bounce-y { 0%,80%,100%{transform:translateY(0);opacity:.5} 40%{transform:translateY(-5px);opacity:1} }
.bounce-1 { animation: bounce-y 1.3s infinite ease-in-out; }
.bounce-2 { animation: bounce-y 1.3s infinite ease-in-out .16s; }
.bounce-3 { animation: bounce-y 1.3s infinite ease-in-out .32s; }

@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.floaty { animation: floaty 5s ease-in-out infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 14s linear infinite; }

@keyframes shimmer { 0%{background-position:-500px 0} 100%{background-position:500px 0} }
.skeleton { background: linear-gradient(90deg,#eef2f7 25%,#e2e8f0 50%,#eef2f7 75%); background-size:1000px 100%; animation: shimmer 1.6s infinite linear; }

.count-up { font-variant-numeric: tabular-nums; }
.speedmono { font-variant-numeric: tabular-nums; letter-spacing:.02em; }

/* ═══════════════════════════════════════════════════════════
   AI STUDIO — model tabs, typewriter, generating anim
   ═══════════════════════════════════════════════════════════ */
.model-tab { cursor: pointer; }
.ai-tab { cursor: pointer; }

.ai-cursor {
    display:inline-block; width:7px; height:15px; margin-left:1px;
    background:#2563EB; border-radius:1px; vertical-align:-2px;
    animation: caret-blink .9s step-end infinite;
}
@keyframes caret-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.ai-gen-spinner {
    width:16px; height:16px; border-radius:50%;
    border:2px solid #DBEAFE; border-top-color:#2563EB;
    animation: spin-slow .7s linear infinite;
}

.ai-html-reply table { width:100%; }

.studio-grid-bg {
    background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,0.12) 1px, transparent 0);
    background-size: 22px 22px;
}

/* ── Mini report bars ────────────────────────────────────── */
.rep-bar { border-radius: 6px 6px 0 0; transition: height .6s cubic-bezier(.4,0,.2,1); }

/* ── Glass utility ───────────────────────────────────────── */
.glass-dark {
    background: rgba(15,23,42,.55); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08);
}

/* ── Toast ───────────────────────────────────────────────── */
#toastHost { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 300; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast {
    background:#0F172A; color:#fff; font-size:12.5px; font-weight:600;
    padding:11px 18px; border-radius:12px; box-shadow:0 12px 30px -8px rgba(15,23,42,.5);
    display:flex; align-items:center; gap:9px; opacity:0; transform: translateY(14px);
    transition: opacity .28s ease, transform .28s ease;
}
.toast.show { opacity:1; transform: translateY(0); }