/* ----- İNTERAKTİF.HTML ----- */

.interactive-page .hub {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 22px
}

@media (max-width: 1100px) {
    .interactive-page .hub {
        grid-template-columns: 1fr
    }
}

.interactive-page .bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.interactive-page .bar .q {
    flex: 1;
    min-width: 220px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 14px;
    font: inherit
}

.interactive-page .bar .btn {
    height: 42px;
    border-radius: 12px
}

.interactive-page .bar .btn[aria-pressed="true"] {
    background: #f1f5f9
}

.interactive-page .tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

@media (max-width: 640px) {
    .interactive-page .tiles {
        grid-template-columns: 1fr
    }
}

.interactive-page .tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    padding: 30px 15px;
    cursor: pointer;
    outline: none
}

.interactive-page .tile:hover {
    background: #f8fafc
}

.interactive-page .tile[aria-selected="true"] {
    box-shadow: 0 0 0 2px var(--brand) inset
}

.interactive-page .tile h3 {
    color: #0b2e5c;
    font-weight: 800;
    margin: 2px 0 4px
}

.interactive-page .tile p {
    color: var(--muted);
    font-size: .95rem
}

.interactive-page :root {
    --ill-alpha: .09;
    --ill-size: 72px;
    --icon-fade: .28;
}

.interactive-page .tile .ill {
    position: absolute;
    right: 10px;
    bottom: 8px;
    color: rgb(7 91 94 / var(--ill-alpha))
}

.interactive-page .tile .ill svg {
    width: var(--ill-size);
    height: var(--ill-size)
}

.interactive-page .acc-head .chev {
    color: rgb(15 23 42 / .38)
}

.interactive-page .tile .ill svg {
    width: 72px;
    height: 72px;
    color: rgb(7 91 94 / .09);
}

.interactive-page .panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    overflow: hidden
}

.interactive-page .panel .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f6
}

.interactive-page .panel .hd h2 {
    font-size: 1.1rem;
    color: #0b2e5c;
    font-weight: 800
}

.interactive-page .panel .bd {
    padding: 16px
}

.interactive-page .badge {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #e6eef3;
    border-radius: 999px;
    background: #fff;
    color: #0b2e5c;
    font-weight: 700
}

.interactive-page .ghost {
    background: #fff;
    border: 1px solid var(--line)
}

.interactive-page .panel-tools {
    display: flex;
    gap: 8px;
    align-items: center
}

.interactive-page .hint {
    color: #64748b;
    font-size: .95rem
}

.interactive-page .acc {
    display: grid;
    gap: 10px;
    margin-top: 12px
}

.interactive-page .acc-item {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.interactive-page .acc-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.interactive-page .acc-head {
    width: 100%
}

.interactive-page .acc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    background: linear-gradient(to bottom, #fafbfc, #f8fafc);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.interactive-page .acc-toggle:hover {
    background: linear-gradient(to bottom, #f1f5f9, #e2e8f0);
    color: #075B5E;
}

.interactive-page .acc-toggle[aria-expanded="true"] {
    background: linear-gradient(to bottom, #075B5E, #064e50);
    color: #fff;
}

.interactive-page .acc-toggle[aria-expanded="true"] .chev {
    color: #fff;
}

.interactive-page .acc-head .chev {
    color: #94a3b8;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.interactive-page .acc-toggle:hover .chev {
    color: #075B5E;
}

.interactive-page .acc-toggle[aria-expanded="true"] .chev {
    transform: rotate(90deg);
    color: #fff;
}

.interactive-page .acc-body {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: #fff;
}

.interactive-page .acc-body-inner {
    padding: 16px 0;
    color: #475569;
    line-height: 1.6;
    font-size: 0.95rem;
}

.interactive-page .acc-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.interactive-page .acc-actions .btn {
    height: 38px;
    border-radius: 8px;
    font-weight: 600;
}

/* Empty State */
.interactive-page .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    text-align: center;
    margin-top: 12px;
}

.interactive-page .empty-state .empty-icon {
    width: 48px;
    height: 48px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.interactive-page .empty-state p {
    font-size: 1rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 6px;
}

.interactive-page .empty-state span {
    font-size: 0.875rem;
    color: #94a3b8;
}

.interactive-page .pcat .icon,
.interactive-page .svc-card .ico,
.interactive-page .sbox .ico {
    opacity: var(--icon-fade) !important
}

.interactive-page .pcat .icon svg,
.interactive-page .svc-card .ico svg {
    opacity: var(--icon-fade) !important
}

.interactive-page .pcat .icon svg *,
.interactive-page .svc-card .ico svg * {
    stroke-opacity: var(--icon-fade) !important;
    fill-opacity: var(--icon-fade) !important
}

.interactive-page .pcat .icon svg {
    color: rgb(7 91 94 / 40%) !important
}

.interactive-page .svc-card::after,
.interactive-page .sbox::after {
    opacity: var(--icon-fade) !important
}