/* SSS Sayfası CSS */

/* Tailwind CSS Import */
@import url('https://cdn.tailwindcss.com');

/* Custom CSS Variables */
:root {
    --primary: #137fec;
    --background-light: #f6f7f8;
    --background-dark: #101922;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
}

/* Material Symbols Font */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* FAQ Details Styling */
details {
    transition: all 0.3s ease;
}

details[open] {
    background: rgba(19, 127, 236, 0.05) !important;
    border: 1px solid rgba(19, 127, 236, 0.2);
}

details summary {
    list-style: none;
    outline: none;
    user-select: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary:hover {
    color: var(--primary);
}

details[open] summary {
    color: var(--primary);
    border-bottom: 1px solid rgba(19, 127, 236, 0.1);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* Smooth Animation for Details */
details[open]>div {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Category Headers */
h2 {
    position: relative;
    padding-left: 1rem;
}

h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    details summary {
        font-size: 1rem;
        padding: 1rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .material-symbols-outlined {
        font-size: 1.25rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --text-muted: #9ca3af;
    }
}

/* Print Styles */
@media print {
    details {
        break-inside: avoid;
    }

    details[open]>div {
        display: block !important;
    }

    .material-symbols-outlined {
        display: none;
    }
}