ماهی در ترکیه: نامها، انواع و تقویم فصلهای صید ۲۰۲۵

.bosphorus-widget { –sea-dark: #0f172a; –sea-mid: #1e293b; –sea-light: #334155; –accent-gold: #fbbf24; –accent-cyan: #22d3ee; –text-main: #f8fafc; –text-muted: #94a3b8; –glass: rgba(15, 23, 42, 0.85); font-family: ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif; width: 100%; max-width: 1200px; margin: 40px auto; height: 600px; display: flex; gap: 10px; padding: 10px; background: linear-gradient(135deg, #020617 0%, #1e293b 100%); border-radius: 20px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); overflow: hidden; position: relative; }/* Background decoration */ .bosphorus-widget::before { content: ”; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 60%); z-index: 0; pointer-events: none; }.fish-panel { position: relative; height: 100%; border-radius: 15px; background-size: cover; background-position: center; cursor: pointer; flex: 0.5; transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; z-index: 1; border: 1px solid rgba(255,255,255,0.05); outline: none; }.fish-panel:focus-visible { outline: 3px solid var(–accent-cyan); outline-offset: -3px; }/* Active State (Expanded) */ .fish-panel.active { flex: 5; }/* Glass Overlay */ .panel-overlay { background: linear-gradient(to top, var(–sea-dark) 0%, var(–glass) 60%, rgba(15, 23, 42, 0.3) 100%); height: 100%; width: 100%; position: absolute; top: 0; left: 0; transition: background 0.5s ease; }.fish-panel.active .panel-overlay { background: linear-gradient(to top, var(–sea-dark) 20%, rgba(15, 23, 42, 0.6) 100%); }/* Content Container */ .panel-content { position: relative; padding: 25px; z-index: 2; color: var(–text-main); opacity: 1; transform: translateY(0); transition: all 0.5s ease; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }/* Icons and Titles */ .icon-wrapper { width: 50px; height: 50px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; border: 1px solid rgba(255,255,255,0.2); font-size: 1.2rem; color: var(–accent-cyan); transition: all 0.3s ease; }.fish-panel.active .icon-wrapper { background: var(–accent-cyan); color: var(–sea-dark); transform: scale(1.1); }.fish-title { font-size: 1.5rem; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; transition: font-size 0.3s ease; } .fish-subtitle { color: var(–accent-gold); font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; }/* Hidden details that reveal on click */ .fish-details { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.6s ease 0.1s; /* Slight delay */ }.fish-panel.active .fish-details { max-height: 400px; /* Adjust based on content */ opacity: 1; margin-top: 15px; }.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; }.detail-item h4 { font-size: 0.8rem; color: var(–text-muted); margin: 0 0 5px 0; }.detail-item p { font-size: 0.95rem; margin: 0; line-height: 1.4; }.cooking-badge { display: inline-block; padding: 4px 10px; background: rgba(251, 191, 36, 0.2); color: var(–accent-gold); border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-top: 5px; }/* Rotated vertical text for inactive state */ .vertical-label { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%) rotate(-90deg); white-space: nowrap; font-size: 1.2rem; font-weight: 700; opacity: 1; transition: opacity 0.3s; pointer-events: none; }.fish-panel.active .vertical-label { opacity: 0; }/* Mobile Responsiveness */ @media (max-width: 768px) { .bosphorus-widget { flex-direction: column; height: auto; /* Allow growth */ min-height: 700px; } .fish-panel { flex: 1; /* Start equal */ min-height: 60px; transition: flex 0.5s ease, min-height 0.5s ease; } .fish-panel.active { flex: 10; min-height: 400px; } .vertical-label { transform: none; bottom: auto; left: 70px; /* Offset from icon */ top: 50%; margin-top: -10px; opacity: 1; } .fish-panel.active .vertical-label { opacity: 0; } .icon-wrapper { width: 40px; height: 40px; font-size: 1rem; margin-bottom: 0; position: absolute; top: 10px; left: 10px; }.fish-panel.active .icon-wrapper { position: relative; top: auto; left: auto; margin-bottom: 10px; } .panel-content { justify-content: flex-start; padding-top: 60px; /* Space for icon when collapsed */ } .fish-panel.active .panel-content { justify-content: flex-end; padding-top: 20px; } .detail-grid { grid-template-columns: 1fr; } } function expandPanel(element) { // Find the parent container const container = document.getElementById(‘bosphorus-fish-guide’); const panels = container.getElementsByClassName(‘fish-panel’); // Remove active class from all panels and reset ARIA for (let panel of panels) { panel.classList.remove(‘active’); panel.setAttribute(‘aria-expanded’, ‘false’); } // Add active class to clicked panel and set ARIA element.classList.add(‘active’); element.setAttribute(‘aria-expanded’, ‘true’); }function handleKey(event, element) { // Allow keyboard navigation (Enter or Space) to expand panels if (event.key === ‘Enter’ || event.key === ‘ ‘) { event.preventDefault(); expandPanel(element); } }