/*
استایل‌های صفحه‌ی اصلی ریاضی‌ابزار
طراحی شده توسط محمد نورائی 

تمامی حقوق محفوظ است (C) ۱۴۰۳ - تا پایان زمان

RiaziAbzar's Index Page's Style
Designed by Muhammad Nouraei

CopyRight (C) 2024 - Until end of Time
*/
@import url(fontiran.css); 

        

    :root {
        --bg-color: #0a0a0a;
        --surface: #111111;
        --border-color: rgba(255, 255, 255, 0.08);
        --text-primary: #ffffff;
        --text-secondary: #888888;
        --accent: #ffffff;
        --spacing-unit: 8px;
        --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'farhang2', sans-serif; 
    }

    body {
        background-color: var(--bg-color);
        color: var(--text-primary);
        line-height: 1.6;
        overflow-x: hidden;
        padding: calc(var(--spacing-unit) * 4);
    }

    .wrapper {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        min-height: 90vh;
    }

    header {
        margin-bottom: calc(var(--spacing-unit) * 8);
        border-bottom: 1px solid var(--border-color);
        padding-bottom: calc(var(--spacing-unit) * 4);
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .site-title {
        font-size: 2.5rem;
        font-weight: 900;
        letter-spacing: -1px;
        text-transform: uppercase;
    }

    .system-status {
        font-size: 0.75rem;
        color: var(--text-secondary);
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .bento-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 280px);
        gap: 16px;
        flex-grow: 1;
        }

    .bento-item {
        background: var(--surface);
        border: 1px solid var(--border-color);
        padding: calc(var(--spacing-unit) * 4);
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: var(--transition);
        text-decoration: none;
        color: inherit;
        overflow: hidden;
    }

    .bento-item:hover {
        border-color: rgba(255, 255, 255, 0.3);
        background: #161616;
    }

    .span-2 { grid-column: span 2; }
    .span-large { grid-column: span 2; grid-row: span 1; }

    .item-number {
        font-family: serif;
        font-style: italic;
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: var(--spacing-unit);
    }

    .item-title {
        font-size: 1.4rem;
        font-weight: 500;
        max-width: 80%;
    }

    .item-arrow {
        position: absolute;
        bottom: 32px;
        left: 32px;
        opacity: 0.3;
        transition: var(--transition);
        }

    .bento-item:hover .item-arrow {
        opacity: 1;
        transform: translateX(-8px);
    }

    .detail-line {
        width: 40px;
        height: 1px;
        background: var(--text-secondary);
        margin-top: auto;
    }

    footer {
        margin-top: calc(var(--spacing-unit) * 10);
        padding-top: calc(var(--spacing-unit) * 4);
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

    .footer-credits span {
        color: var(--text-primary);
        margin-right: 8px;
    }

    
    
    @media (max-width: 900px) {     
        .bento-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
        }
        .span-2 { grid-column: span 2; }
    }

    @media (max-width: 500px) {
        .bento-grid {
            grid-template-columns: 1fr;
        }
        .span-2 { grid-column: span 1; }
    }