/* ===================================================================
   TEKNOTEKNİK FLUID STYLE (TAM EKRAN YERLEŞİMİ)
   GÖREV: Widgetları Sağa/Sola Yapıştırmak (Boşlukları Yok Etmek)
   =================================================================== */

:root {
    --bg-body: #f6f9fc;
    --surface: #ffffff;
    --navy-dark: #000080;
    --navy-light: #0044aa;
    --neon-blue: #00d2ff;
    
    /* Puffy Gölgeler */
    --shadow-puffy: 12px 12px 24px rgba(0, 0, 128, 0.08), -10px -10px 20px rgba(255, 255, 255, 1);
    --shadow-puffy-hover: 15px 15px 35px rgba(0, 0, 128, 0.12), -10px -10px 30px rgba(255, 255, 255, 1);
    --shadow-inset: inset 5px 5px 12px rgba(0, 0, 128, 0.06), inset -5px -5px 12px rgba(255, 255, 255, 0.8);

    --radius: 25px;
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-body);
    color: var(--navy-dark);
    font-family: var(--font-body);
    line-height: 1.6;
    margin: 0; padding: 0;
    overflow-x: hidden;
}

/* ===================================================================
   1. LAYOUT DEVRİMİ (CONTAINER İPTAL -> FULL WIDTH AKTİF)
   =================================================================== */

.page-wrapper { 
    padding: 20px 0; 
}

/* KRİTİK MÜDAHALE: 
   Bootstrap'in container yapısını eziyoruz. 
   Max-width %100 yapıldı. Padding minimuma indirildi.
*/
.container, .container-fluid, .container-lg, .container-xl, .container-xxl {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    
    /* Widgetlar ekrana yapışsın ama 10px nefes payı kalsın. 
       Tam yapışsın istersen burayı 0px yap. */
    padding-left: 10px !important; 
    padding-right: 10px !important;
}

/* ANA GRID YAPISI */
.page-grid {
    display: grid;
    /* Sol (300px) - Orta (Esnek) - Sağ (300px) 
       Yan sütunları biraz genişlettim (280->300) ki ekran genişleyince cılız kalmasınlar */
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    gap: 20px; /* Sütunlar arası boşluk */
    align-items: start;
    width: 100%;
}

/* Sütunlar */
.sidebar, .main-content {
    display: flex; flex-direction: column; gap: 25px; width: 100%;
}

/* ===================================================================
   2. WIDGET VE MODÜL GÖRÜNÜMLERİ (PUFFY)
   =================================================================== */

.module-3d, 
.sidebar .module-widget-wrapper {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-puffy);
    border: 1px solid rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%; /* Kendi sütununu tam doldur */
}

.module-3d:hover, 
.sidebar .module-widget-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-puffy-hover);
    z-index: 5;
}

/* Sidebar Widget Yüksekliği */
.sidebar .module-widget-wrapper {
    height: 450px; /* Ekran genişleyince yükseklik de biraz artsın */
    display: flex; flex-direction: column;
}

/* Widget Başlıkları */
.sidebar .widget-title, .widget-title {
    font-family: var(--font-heading);
    color: var(--navy-dark);
    font-size: 0.95rem; font-weight: 800;
    padding: 15px 20px; margin: 0;
    border-bottom: 2px solid rgba(0,0,128,0.03);
    background: #ffffff;
    display: flex; align-items: center; gap: 10px;
    text-transform: uppercase; letter-spacing: 0.5px;
    flex-shrink: 0;
}
.widget-title i { color: var(--neon-blue); font-size: 1.1rem; }

/* Scroller Alanı */
.widget-scroller-wrapper {
    flex: 1; overflow: hidden; position: relative; padding: 10px 0;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.widget-scroller { animation: scrollVertical 45s linear infinite; }
.widget-scroller:hover { animation-play-state: paused; }

@keyframes scrollVertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* Widget Linkleri */
.widget-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    color: var(--navy-dark); font-weight: 600; font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,128,0.02);
    transition: all 0.2s ease;
}
.widget-item i { color: var(--neon-blue); width: 20px; text-align: center; transition: transform 0.2s; }
.widget-item:hover { background: #f8fbff; padding-left: 25px; color: var(--navy-light); }
.widget-item:hover i { transform: scale(1.2); }

/* ===================================================================
   3. GİZLEME VE DÜZELTMELER (ÇİFT BAŞLIK FİX)
   =================================================================== */

/* Sistemin otomatik bastığı H1 başlıklarını gizle */
.main-content > h1:first-child,
.app-page-title, .page-title-wrapper {
    display: none !important;
}

/* Bizim modüllerin içindeki başlıklar serbest */
.module-3d h1, .module-3d h2, .module-3d h3 {
    display: block !important;
}

/* ===================================================================
   4. MOBİL UYUM
   =================================================================== */
@media (max-width: 1200px) {
    .page-grid { 
        grid-template-columns: 1fr !important; /* Mobilde tek sütun */
    }
    .sidebar { display: none !important; }
    .container { padding: 0 10px !important; }
}