Giresun Üniversitesigiresun.edu.tr.comGiresun Üniversitesi ...(c) 2019, Taşpınar Yazılım06/03/2014tr-TRBalkanlarda Güncel Sorun Alanları Adlı Panelimizi Gerçekleştirdik!<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Balkanlarda Güncel Sorun Alanları Paneli</title> <style> /* Genel Kapsayıcı ve Yazı Tipi */ .panel-wrapper { font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif; line-height: 1.8; color: #333; max-width: 1000px; margin: 0 auto; padding: 20px; background-color: #fafafa; box-sizing: border-box; } /* Başlık Stili */ .panel-title { color: #1a237e; border-bottom: 2px solid #ff8f00; padding-bottom: 10px; margin-bottom: 30px; font-size: 24px; } /* Bilgi Kartları Kapsayıcısı */ .cards-container { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; justify-content: center; } /* Bireysel Bilgi Kartı */ .info-card { flex: 1 1 300px; max-width: 350px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 25px; transition: transform 0.3s ease; box-sizing: border-box; } .info-card:hover { transform: translateY(-5px); } .card-header { display: flex; align-items: center; margin-bottom: 15px; } .card-icon { margin-right: 12px; stroke: #1a237e; } .card-header h4 { color: #1a237e; margin: 0; font-weight: 700; font-size: 18px; } .card-text { margin: 0; color: #666; font-size: 15px; line-height: 1.6; } .card-text strong { color: #333; } .highlight-text { color: #ff8f00; font-weight: 600; } /* Paragraf ve İçerik Alanı */ .text-content { text-align: justify; background-color: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 50px; font-size: 16px; box-sizing: border-box; } .text-content p { margin-top: 0; margin-bottom: 20px; } .text-content p:last-child { margin-bottom: 0; } /* Slider (Carousel) Stilleri */ .slider-container { position: relative; max-width: 900px; margin: 0 auto; overflow: hidden; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); } .slides-wrapper { display: flex; transition: transform 0.5s ease-in-out; align-items: flex-start; } .slide { min-width: 100%; box-sizing: border-box; cursor: pointer; } .slide img { width: 100%; height: auto; display: block; transition: transform 0.3s; } .slide:hover img { transform: scale(1.02); } /* Slider Yönlendirme Butonları */ .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.6); color: #1a237e; border: none; padding: 12px 15px; border-radius: 50%; cursor: pointer; transition: background 0.3s; z-index: 2; font-size: 16px; } .slider-btn:hover { background: rgba(255, 255, 255, 0.9); } .slider-btn.prev { left: 15px; } .slider-btn.next { right: 15px; } /* Slider Noktaları (Dots) */ .dots-container { position: absolute; bottom: 15px; width: 100%; text-align: center; display: flex; justify-content: center; gap: 8px; z-index: 2; } .dot { height: 12px; width: 12px; background-color: rgba(255,255,255,0.6); border-radius: 50%; display: inline-block; cursor: pointer; transition: background-color 0.3s, transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .dot.active { background-color: #ff8f00; transform: scale(1.2); } /* --------- LIGHTBOX (Büyütülmüş Fotoğraf) KUSURSUZ BOOTSTRAP STİLİ --------- */ .lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); /* Daha profesyonel yarı saydam siyah */ opacity: 0; transition: opacity 0.3s ease-in-out; } .lightbox.show { display: flex; opacity: 1; } .lightbox-content { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 40px; /* Mobilde ve webde resmin kenarlara yapışmasını engeller */ box-sizing: border-box; } .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; /* En-boy oranını bozmadan ekrana sığdırır */ border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); transform: scale(0.9); /* Açılış animasyonu için küçültülmüş başlar */ transition: transform 0.3s ease-in-out; user-select: none; } .lightbox.show img { transform: scale(1); /* Sınıf eklendiğinde orijinal boyutuna büyür (zoom efekti) */ } .lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 1001; transition: color 0.3s, transform 0.3s; line-height: 1; } .lightbox-close:hover { color: #ff8f00; transform: scale(1.1); } .lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); padding: 15px 20px; border-radius: 50%; cursor: pointer; transition: all 0.3s; font-size: 24px; z-index: 1001; display: flex; align-items: center; justify-content: center; } .lightbox-btn:hover { background: rgba(255, 255, 255, 0.8); color: #1a237e; } .lightbox-btn.prev { left: 20px; } .lightbox-btn.next { right: 20px; } /* RESPONSIVE (Mobil ve Tablet Uyumluluğu) */ @media (max-width: 768px) { .panel-wrapper { padding: 15px; } .panel-title { font-size: 20px; text-align: center; } .info-card { max-width: 100%; flex-basis: 100%; padding: 20px; } .text-content { padding: 25px; font-size: 15px; } .lightbox-content { padding: 15px; } /* Mobilde kenar boşluklarını azalt */ .lightbox-btn { padding: 10px 15px; font-size: 18px; border: none; background: rgba(0,0,0,0.5); } .lightbox-btn.prev { left: 10px; } .lightbox-btn.next { right: 10px; } .lightbox-close { top: 15px; right: 15px; font-size: 35px; } } @media (max-width: 480px) { .text-content { padding: 15px; font-size: 14px; } .slider-btn { padding: 8px 12px; font-size: 14px; } } </style> </head> <body> <div class="panel-wrapper"> <h2 class="panel-title">“Balkanlarda Güncel Sorun Alanları” Paneli</h2> <div class="cards-container"> <div class="info-card"> <div class="card-header"> <svg class="card-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2a10 10 0 0 0-10 10c0 5.25 10 13 10 13s10-7.75 10-13a10 10 0 0 0-10-10z"/> <circle cx="12" cy="12" r="3"/> </svg> <h4>Yer & Zaman</h4> </div> <p class="card-text"> <strong>Giresun Üniversitesi</strong><br> Mevlana Amfisi<br> <span class="highlight-text">20 Nisan 2026 - Saat 14.00</span> </p> </div> <div class="info-card"> <div class="card-header"> <svg class="card-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> <circle cx="12" cy="7" r="4"/> </svg> <h4>Moderatör</h4> </div> <p class="card-text" style="font-weight: 600;">Prof. Dr. Göktürk TÜYSÜZOĞLU</p> </div> <div class="info-card"> <div class="card-header"> <svg class="card-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> <circle cx="9" cy="7" r="4"/> <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> <path d="M16 3.13a4 4 0 0 1 0 7.75"/> </svg> <h4>Konuşmacılar</h4> </div> <p class="card-text" style="font-weight: 600;"> Doç. Dr. Ayça EMİNOĞLU<br> Doç. Dr. Kader ÖZLEM </p> </div> </div> <div class="text-content"> <p>20/04/2026 tarihinde saat 14.00’da Giresun Üniversitesi Mevlana Amfisinda <strong>Prof. Dr. Göktürk TÜYSÜZOĞLU</strong> moderatörlüğünde gerçekleştirilen <strong>“Balkanlarda Güncel Sorun Alanları”</strong> başlıklı panele konuşmacı olarak katılan <strong>Doç. Dr. Ayça EMİNOĞLU</strong> hocamız, Balkan coğrafyasının önemli sorun alanlarından olan Bosna-Hersek konusuna değinmiştir. Bosna-Hersek Anayasasını da oluşturan Dayton Barış Antlaşması’nın getirdiği ağır bürokrasinin ve vatandaş temelli olmayıp etnik ayrılığa dayalı siyasal sistemin sorunların çözümüne katkı sağlamadığı ifade edilmiştir.</p> <p>Panelin diğer konuşmacısı olan <strong>Doç. Dr. Kader ÖZLEM</strong> hocamız, Batı Balkan ülkelerinin aralarında yaşadığı siyasal sorunlar ve sınır anlaşmazlıklarına değinerek, gelecekte ne gibi sorun alanlarının ortaya çıkabileceğinden bahsetmiştir. Ayrıca hocamız bölgedeki siyasal yaklaşımlarda birtakım değişimler olduğunu ve bu yaklaşımın Avrupa Birliği üyeliği talepleri bağlamında geliştiğini ifade etmiştir.</p> <p>Sunum yapan katılımcılara ve moderatör hocamıza Giresun Üniversitesi İİBF Dekanı <strong>Prof. Dr. Servet CEYLAN</strong> katılım belgelerini takdim etmiştir. Hocalarımıza değerli katkılarından dolayı teşekkür ediyoruz.</p> </div> <div class="slider-container" id="sliderContainer"> <div class="slides-wrapper" id="slides"> <div class="slide" onclick="openLightbox(0)"><img src="https://karasam.giresun.edu.tr/Files/ckFiles/karasam-giresun-edu-tr/Uluslararas%C4%B1%20%C4%B0li%C5%9Fkiler%20B%C3%B6l%C3%BC_20260421_000704_0000.png" alt="Panel Fotoğrafı 1"></div> <div class="slide" onclick="openLightbox(1)"><img src="https://karasam.giresun.edu.tr/Files/ckFiles/karasam-giresun-edu-tr/Uluslararas%C4%B1%20%C4%B0li%C5%9Fkiler%20B%C3%B6l%C3%BC_20260421_001139_0000.png" alt="Panel Fotoğrafı 2"></div> <div class="slide" onclick="openLightbox(2)"><img src="https://karasam.giresun.edu.tr/Files/ckFiles/karasam-giresun-edu-tr/Uluslararas%C4%B1%20%C4%B0li%C5%9Fkiler%20B%C3%B6l%C3%BC_20260421_001215_0000.png" alt="Panel Fotoğrafı 3"></div> <div class="slide" onclick="openLightbox(3)"><img src="https://karasam.giresun.edu.tr/Files/ckFiles/karasam-giresun-edu-tr/Uluslararas%C4%B1%20%C4%B0li%C5%9Fkiler%20B%C3%B6l%C3%BC_20260421_001232_0000.png" alt="Panel Fotoğrafı 4"></div> <div class="slide" onclick="openLightbox(4)"><img src="https://karasam.giresun.edu.tr/Files/ckFiles/karasam-giresun-edu-tr/Uluslararas%C4%B1%20%C4%B0li%C5%9Fkiler%20B%C3%B6l%C3%BC_20260421_001446_0000.png" alt="Panel Fotoğrafı 5"></div> <div class="slide" onclick="openLightbox(5)"><img src="https://karasam.giresun.edu.tr/Files/ckFiles/karasam-giresun-edu-tr/Uluslararas%C4%B1%20%C4%B0li%C5%9Fkiler%20B%C3%B6l%C3%BC_20260421_001553_0000.png" alt="Panel Fotoğrafı 6"></div> <div class="slide" onclick="openLightbox(6)"><img src="https://karasam.giresun.edu.tr/Files/ckFiles/karasam-giresun-edu-tr/Uluslararas%C4%B1%20%C4%B0li%C5%9Fkiler%20B%C3%B6l%C3%BC_20260421_001326_0000.png" alt="Panel Fotoğrafı 7"></div> <div class="slide" onclick="openLightbox(7)"><img src="https://karasam.giresun.edu.tr/Files/ckFiles/karasam-giresun-edu-tr/Uluslararas%C4%B1%20%C4%B0li%C5%9Fkiler%20B%C3%B6l%C3%BC_20260421_001301_0000.png" alt="Panel Fotoğrafı 8"></div> </div> <button class="slider-btn prev" onclick="prevSlide(event)">&#10094;</button> <button class="slider-btn next" onclick="nextSlide(event)">&#10095;</button> <div class="dots-container" id="dots"> <span class="dot active" onclick="goToSlide(0)"></span> <span class="dot" onclick="goToSlide(1)"></span> <span class="dot" onclick="goToSlide(2)"></span> <span class="dot" onclick="goToSlide(3)"></span> <span class="dot" onclick="goToSlide(4)"></span> <span class="dot" onclick="goToSlide(5)"></span> <span class="dot" onclick="goToSlide(6)"></span> <span class="dot" onclick="goToSlide(7)"></span> </div> </div> <div class="lightbox" id="lightbox"> <span class="lightbox-close" onclick="closeLightbox()">&times;</span> <button class="lightbox-btn prev" onclick="prevLightboxSlide(event)">&#10094;</button> <div class="lightbox-content" id="lightbox-content"> <img id="lightbox-img" src="" alt="Büyütülmüş Fotoğraf"> </div> <button class="lightbox-btn next" onclick="nextLightboxSlide(event)">&#10095;</button> </div> </div> <script> /* --------- TEMEL SLIDER KODLARI --------- */ let currentSlide = 0; const slides = document.getElementById('slides'); const slideElements = document.querySelectorAll('.slide img'); const dots = document.getElementById('dots').getElementsByClassName('dot'); const totalSlides = dots.length; let slideInterval; function showSlide(index) { if (index < 0) currentSlide = totalSlides - 1; else if (index >= totalSlides) currentSlide = 0; else currentSlide = index; slides.style.transform = `translateX(-${currentSlide * 100}%)`; for (let i = 0; i < totalSlides; i++) { dots[i].classList.remove('active'); } dots[currentSlide].classList.add('active'); } function nextSlide(e) { if(e) e.stopPropagation(); showSlide(currentSlide + 1); resetTimer(); } function prevSlide(e) { if(e) e.stopPropagation(); showSlide(currentSlide - 1); resetTimer(); } function goToSlide(index) { showSlide(index); resetTimer(); } function startTimer() { slideInterval = setInterval(() => nextSlide(), 5000); } function resetTimer() { clearInterval(slideInterval); startTimer(); } // Slider Dokunmatik Kaydırma (Swipe) let touchstartX = 0; let touchendX = 0; const sliderContainer = document.getElementById('sliderContainer'); sliderContainer.addEventListener('touchstart', e => { touchstartX = e.changedTouches[0].screenX; }, {passive: true}); sliderContainer.addEventListener('touchend', e => { touchendX = e.changedTouches[0].screenX; if (touchendX < touchstartX - 50) nextSlide(); if (touchendX > touchstartX + 50) prevSlide(); }, {passive: true}); showSlide(currentSlide); startTimer(); /* --------- LIGHTBOX KODLARI --------- */ let lightboxIndex = 0; const lightbox = document.getElementById('lightbox'); const lightboxImg = document.getElementById('lightbox-img'); const lightboxContent = document.getElementById('lightbox-content'); function openLightbox(index) { lightboxIndex = index; updateLightboxImage(); lightbox.classList.add('show'); clearInterval(slideInterval); document.body.style.overflow = 'hidden'; // Arka planın kaymasını engeller (Bootstrap modal mantığı) } function closeLightbox() { lightbox.classList.remove('show'); showSlide(lightboxIndex); resetTimer(); document.body.style.overflow = 'auto'; // Arka plan kaydırmasını geri açar } function updateLightboxImage() { if (lightboxIndex < 0) lightboxIndex = totalSlides - 1; if (lightboxIndex >= totalSlides) lightboxIndex = 0; lightboxImg.src = slideElements[lightboxIndex].src; } function nextLightboxSlide(e) { if(e) e.stopPropagation(); lightboxIndex++; updateLightboxImage(); } function prevLightboxSlide(e) { if(e) e.stopPropagation(); lightboxIndex--; updateLightboxImage(); } // Lightbox boş alana tıklayınca kapatma lightbox.addEventListener('click', function(e) { if (e.target === lightbox || e.target === lightboxContent) { closeLightbox(); } }); // Lightbox Dokunmatik Kaydırma (Swipe) let lbTouchstartX = 0; let lbTouchendX = 0; lightbox.addEventListener('touchstart', e => { lbTouchstartX = e.changedTouches[0].screenX; }, {passive: true}); lightbox.addEventListener('touchend', e => { lbTouchendX = e.changedTouches[0].screenX; if (lbTouchendX < lbTouchstartX - 50) nextLightboxSlide(); if (lbTouchendX > lbTouchstartX + 50) prevLightboxSlide(); }, {passive: true}); // Klavye Yön Tuşları Desteği document.addEventListener('keydown', function(e) { if (lightbox.classList.contains('show')) { if (e.key === 'ArrowRight') nextLightboxSlide(); if (e.key === 'ArrowLeft') prevLightboxSlide(); if (e.key === 'Escape') closeLightbox(); } }); </script> </body> </html> https://karasam.giresun.edu.tr/tr/announcement-detail/balkanlarda-guncel-sorun-alanlari-adli-panelimizi-gerceklestirdik/1315620.04.2026