/* تنظیمات کانتینر */
.bento-section {
    padding: 20px 0 60px;
    position: relative;
    /* المان زنده پس‌زمینه کل بخش */
    overflow: hidden;
}

/* ذرات معلق زنده (Background Particles) */
.bento-section::before, .bento-section::after {
    content: ''; position: absolute; width: 300px; height: 300px;
    border-radius: 50%; filter: blur(80px); opacity: 0.15; z-index: -1;
    animation: float-bg 10s infinite alternate;
}
.bento-section::before { background: #FFD700; top: 10%; left: -50px; }
.bento-section::after { background: #4D96FF; bottom: 10%; right: -50px; animation-delay: -5s; }
@keyframes float-bg { from { transform: translate(0,0); } to { transform: translate(20px, 40px); } }


/* شبکه گرید (2 ستون بالا، 1 سطر پایین) */
.bento-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 340px auto; /* ارتفاع بیشتر برای دفتر */
    gap: 25px;
    grid-template-areas: 
        "featured quote"
        "audio audio";
}

/* استایل پایه کارت‌ها */
.bento-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 35px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    display: flex; flex-direction: column;
}

/* هاور پاستیلی */
.bento-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 0 0 4px #a0c4ff, 0 25px 60px rgba(77, 150, 255, 0.25);
    border-color: white; z-index: 10;
}

/* --- 1. مقاله ویژه (Featured) --- */
.area-featured {
    grid-area: featured; padding: 0; border: none;
}
.featured-img-wrapper {
    width: 100%; height: 100%; position: absolute; inset: 0;
    transition: transform 0.8s ease;
}
.area-featured:hover .featured-img-wrapper { transform: scale(1.08); }
.featured-img { width: 100%; height: 100%; object-fit: cover; }
.featured-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.1) 70%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 35px; color: white;
}
.f-tag {
    background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    padding: 6px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 800;
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.3); align-self: flex-start;
}
.f-title {
    font-size: 2rem; margin: 0 0 10px 0; line-height: 1.4;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.f-meta { font-size: 0.9rem; opacity: 0.9; display: flex; gap: 15px; font-weight: 500; }
.view-badge {
    background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 8px; font-size: 0.8rem;
    display: flex; align-items: center; gap: 5px;
}

/* --- 2. باکس دفترچه یادداشت (Notebook Style) --- */
.area-quote {
    grid-area: quote;
    background-color: #fff;
    /* خطوط دفتر با گرادینت */
    background-image: linear-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 100% 30px; /* فاصله خطوط */
    border: 2px solid #f1f5f9;
    padding: 0; /* پدینگ رو حذف میکنیم تا متن دقیق تنظیم بشه */
    position: relative;
}
/* سوراخ‌های دفتر */
.area-quote::before {
    content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px;
    border-left: 2px dashed #cbd5e1; z-index: 2;
}

.notebook-content {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center;
    padding: 0 40px; /* فاصله از سوراخ‌ها */
}

.quote-text {
    font-weight: 900; font-size: 1.2rem; 
    line-height: 30px; /* دقیقاً هم‌اندازه با خطوط زمینه */
    color: #334155; margin: 0;
    position: relative; top: 1px; /* تنظیم دقیق روی خط */
}
.quote-author {
    margin-top: 15px; display: block; font-size: 0.9rem; color: #94a3b8; font-weight: 500;
    background: white; padding: 0 10px; /* برای اینکه خط روش نیفته */
}

/* المان متحرک روی دفتر (مثلاً یک گیره کاغذ) */
.paper-clip {
    position: absolute; top: -10px; right: 30px; width: 20px; height: 40px;
    border: 4px solid #94a3b8; border-radius: 20px; z-index: 5;
    border-bottom: none;
}


/* --- 3. پلیر موزیک تمام نارنجی (VLC Premium) --- */
.area-audio {
    grid-area: audio;
    /* بک‌گراند تمام نارنجی جذاب */
    background: linear-gradient(135deg, #FF8800 0%, #FF6600 100%);
    color: white;
    border: none; /* حذف بوردر اضافه */
    padding: 0;
    display: flex; flex-direction: column;
    /* حذف افکت هاور از روی این کارت */
    transform: none !important;
    box-shadow: 0 10px 30px rgba(255, 102, 0, 0.3) !important;
}

/* متن جذاب بالای پلیر */
.player-header-banner {
    background: rgba(0,0,0,0.1); /* کمی تیره‌تر از زمینه */
    padding: 12px 25px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.player-hook {
    font-weight: 900; font-size: 1rem; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 8px;
}
.vlc-cone {
    /* آیکون کله قندی سفید */
    width: 0; height: 0; 
    border-left: 6px solid transparent; border-right: 6px solid transparent; 
    border-bottom: 12px solid white; position: relative;
}
.vlc-cone::after { content: ''; position: absolute; top: 3px; left: -3px; width: 6px; height: 2px; background: rgba(0,0,0,0.2); }

.player-body { display: flex; flex: 1; }

/* بخش کنترل‌ها (سمت راست) */
.player-main {
    width: 40%; padding: 25px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    border-left: 1px solid rgba(255,255,255,0.15);
    position: relative;
}

/* اکولایزر سفید و نامنظم */
.chaos-equalizer {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: flex-end; gap: 6px;
    padding-bottom: 10px; z-index: 0; opacity: 0.2;
}
.ch-bar {
    width: 10px; background: white; border-radius: 5px 5px 0 0;
    height: 10%; transition: height 0.1s ease;
}
.area-audio.playing .ch-bar { animation: chaos-dance 0.5s infinite ease-in-out alternate; }
/* ریتم نامنظم */
.ch-bar:nth-child(1) { animation-duration: 0.45s; }
.ch-bar:nth-child(2) { animation-duration: 0.7s; }
.ch-bar:nth-child(3) { animation-duration: 0.3s; }
.ch-bar:nth-child(4) { animation-duration: 0.6s; }
.ch-bar:nth-child(5) { animation-duration: 0.5s; }
@keyframes chaos-dance { 0% { height: 10%; } 100% { height: 70%; } }

.album-art {
    width: 100px; height: 100px; border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin-bottom: 15px; z-index: 2; object-fit: cover;
    border: 3px solid rgba(255,255,255,0.3);
}

.track-title { font-weight: 900; margin: 0; font-size: 1.1rem; z-index: 2; text-align: center; }
.track-desc { font-size: 0.85rem; opacity: 0.8; margin-top: 5px; z-index: 2; }

/* دکمه‌های کنترل سفید */
.player-controls {
    display: flex; align-items: center; gap: 20px; margin-top: 20px; z-index: 2;
}
.ctrl-btn {
    background: rgba(255,255,255,0.2); color: white; border: none;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: 0.3s;
}
.ctrl-btn:hover { background: white; color: #FF6600; }

.play-btn-main {
    width: 60px; height: 60px; background: white; color: #FF6600;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.play-btn-main:hover { transform: scale(1.1); background: white; }
/* آیکون داخل دکمه پلی باید کمی بزرگتر باشه */
.play-btn-main svg { width: 28px; height: 28px; }


/* لیست پخش (سمت چپ) */
.player-playlist {
    width: 60%; padding: 20px; overflow-y: auto; max-height: 280px;
    /* اسکرول بار سفید */
    scrollbar-color: rgba(255,255,255,0.5) transparent;
}
.player-playlist::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); border-radius: 10px; }

.playlist-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 15px; border-radius: 12px; margin-bottom: 8px;
    cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: 0.2s;
}
.playlist-item:hover { background: rgba(255,255,255,0.1); }
.playlist-item.active {
    background: white; color: #FF6600; /* آیتم فعال سفید میشه */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.pi-title { font-weight: bold; font-size: 0.95rem; }
.pi-time { font-size: 0.8rem; opacity: 0.8; }
.playlist-item.active .pi-time { opacity: 1; color: #FF6600; }

/* موبایل */
@media (max-width: 900px) {
    .area-audio { height: auto; }
    .player-body { flex-direction: column; }
    .player-main { width: 100%; border-left: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding: 30px 20px; }
    .player-playlist { width: 100%; max-height: 220px; }
}

/* ========== ریسپانسیو موبایل (بدون اسکرول افقی، چیدمان ستونی) ========== */
@media (max-width: 900px) {
    .bento-grid {
        display: flex; flex-direction: column; /* ستونی شدن */
        height: auto;
    }
    .bento-card {
        width: 100%; /* تمام عرض */
        height: auto; min-height: 300px;
    }
    .area-featured { height: 350px; }
    
    .area-audio { min-height: auto; }
    .player-body { flex-direction: column; }
    .player-main { width: 100%; border-left: none; border-bottom: 1px solid #333; padding: 20px; }
    .player-playlist { width: 100%; max-height: 200px; }
}

/* --- استایل تیتر جداگانه (مثل عکس نمونه) --- */
.audio-wrapper {
    display: flex; flex-direction: column; gap: 15px;
}

.section-header-title {
    text-align: center; /* متن وسط */
    margin-bottom: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* آیتم‌ها وسط */
}

.sh-text {
    font-size: 1.8rem; font-weight: 900; color: #1e293b; margin: 0;
    display: inline-flex; align-items: center; gap: 12px;
    justify-content: center; /* آیکون و متن وسط */
}

.sh-sub {
    font-size: 0.95rem; color: #64748b; margin: 5px 0 0 0; font-weight: 500;
}

/* آیکون هدفون با CSS خالص */
.css-icon-headphone {
    width: 24px; height: 24px;
    border: 3px solid #1e293b;
    border-bottom: none;
    border-radius: 50px 50px 0 0;
    position: relative;
    margin-right: 5px;
}
.css-icon-headphone::before, .css-icon-headphone::after {
    content: ''; position: absolute; bottom: -6px;
    width: 8px; height: 10px; background: #1e293b;
    border-radius: 3px;
}
.css-icon-headphone::before { left: -4px; }
.css-icon-headphone::after { right: -4px; }


/* --- اصلاح استایل کارت پلیر (حذف هدر قبلی) --- */
.area-audio-card {
    /* همون استایل‌های نارنجی قبلی */
    background: linear-gradient(135deg, #FF8800 0%, #FF6600 100%);
    color: white; border: none; padding: 0;
    display: flex; flex-direction: column;
    border-radius: 35px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(255, 102, 0, 0.3);
    min-height: 250px;
}

/* بقیه استایل‌های داخلی پلیر (کنترلر و لیست پخش) همون قبلی‌هاست */
/* فقط مطمئن شو .area-audio قبلی رو پاک کردی که تداخل نکنه */