/* style.css - SAAS V9.0 (FINAL MASTER - FULL PACKAGE) */

/* =========================================
   1. TEMEL AYARLAR VE DEĞİŞKENLER
   ========================================= */
:root {
  --header-height: 90px;
  --footer-height: 50px;
  --gap: 15px;
  --left-width: 400px;
  --right-width: 400px;
  
  /* Varsayılan Renkler */
  --bg-color: #0f172a;
  --glass-bg: rgba(255, 255, 255, 0.08); /* Opaklık ayarı */
  --glass-border: rgba(255, 255, 255, 0.12);
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --accent-color: #38bdf8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
  background: var(--bg-color); 
  background-image: radial-gradient(circle at top right, rgba(255,255,255,0.05) 0%, transparent 100%);
  color: var(--text-main); 
  height: 100vh; width: 100vw; overflow: hidden; 
}

/* =========================================
   2. IZGARA SİSTEMİ (LAYOUT)
   ========================================= */
.dashboard-container {
  display: grid; 
  height: 100vh; width: 100vw; 
  padding: var(--gap); gap: var(--gap);
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
}

/* 4 Sütunlu (Varsayılan) */
.dashboard-container:not(.layout-3-col):not(.layout-2-col) {
  grid-template-columns: var(--left-width) 1fr 1fr var(--right-width);
  grid-template-areas: "header header header header" "left mid1 mid2 right" "footer footer footer footer";
}

/* 3 Sütunlu */
.dashboard-container.layout-3-col {
    grid-template-columns: var(--left-width) 1fr var(--right-width);
    grid-template-areas: "header header header" "left mid right" "footer footer footer";
}
.dashboard-container.layout-3-col #col-1 { grid-area: left; }
.dashboard-container.layout-3-col #col-2 { grid-area: mid; display: flex !important; flex-direction: column !important; height: 100% !important; } 
.dashboard-container.layout-3-col #col-3 { display: none !important; } 
.dashboard-container.layout-3-col #col-4 { grid-area: right; }

/* 2 Sütunlu */
.dashboard-container.layout-2-col {
    grid-template-columns: var(--left-width) 1fr;
    grid-template-areas: "header header" "left mid" "footer footer";
}
.dashboard-container.layout-2-col #col-1 { grid-area: left; }
.dashboard-container.layout-2-col #col-2 { grid-area: mid; display: flex !important; flex-direction: column !important; height: 100% !important; } 
.dashboard-container.layout-2-col #col-3, 
.dashboard-container.layout-2-col #col-4 { display: none !important; } 

/* Sütun Yapısı */
.sidebar-left, .sidebar-right, .main-media {
  display: flex; flex-direction: column; gap: var(--gap);
  height: 100%; overflow: hidden; min-height: 0;
}

/* =========================================
   3. BİLEŞENLER (CAM EFEKTİ & KUTULAR)
   ========================================= */

/* Ortak Cam Stili (Glassmorphism) */
.glass-panel, .widget, .media-box { 
    background: var(--glass-bg); 
    /* Bulanıklık Efekti */
    backdrop-filter: blur(30px) !important; 
    -webkit-backdrop-filter: blur(30px) !important; 
    
    border: 1px solid var(--glass-border); 
    border-radius: 16px; 
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); 
}

/* Kutu Davranışı (Küçülme & Büyüme) */
.widget, .media-box { 
  flex: 1 1 auto; 
  display: flex; flex-direction: column; 
  position: relative; 
  overflow: hidden !important; /* Taşanı gizle ki küçülebilsin */
  
  /* Edit modunda en az 50px'e inebilsin */
  min-height: 50px !important; 
  height: auto; 
  padding: 0; /* İçerik padding'i aşağıda */
}

/* İçerik Alanı */
.widget-content, .media-content, .content-area {
    flex: 1 1 auto !important; width: 100%; height: 100%;
    position: relative; overflow: hidden !important;
    min-height: 0 !important; /* İçeriğin kutuyu zorlamasını engeller */
    display: flex; justify-content: center; align-items: center;
}

/* Widget İç Boşluğu (Eski kodundan) */
.widget { padding: 15px; }
.media-box { padding: 0; } /* Medya kutuları tam ekran olmalı */

/* Başlık Çubuğu */
.widget-header { 
    color: var(--accent-color); 
    border-bottom: 1px solid var(--glass-border); 
    padding-bottom: 10px; margin-bottom: 10px; 
    font-weight: 700; font-size: 1.1rem; 
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0 !important; /* Başlık asla ezilmesin */
    min-height: 30px;
}

/* Medya Etiketi (Sol Üst Köşe) */
.media-label { 
    position: absolute; top: 15px; left: 15px; 
    background: rgba(0,0,0,0.7); color: #fff; 
    padding: 6px 14px; border-radius: 6px; 
    font-size: 0.85rem; font-weight: 600; 
    z-index: 10; border: 1px solid rgba(255,255,255,0.1); 
}

/* Medya Uyumu */
.media-box img, .media-box video, .media-box iframe { 
    width: 100%; height: 100%; object-fit: cover; border: none; position: absolute; top:0; left:0;
}

/* Gizleme Kilidi */
.hidden, .media-box.hidden, .widget.hidden {
    display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
}

/* Tablo ve Listeler İçin Özel Ayar */
#widget-dersProgrami .widget-content,
#widget-nobet .widget-content,
#widget-takvim .widget-content {
    display: block !important; 
    justify-content: flex-start !important;
}

/* =========================================
   4. HEADER & FOOTER
   ========================================= */
header { grid-area: header; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; }
#kurumLogo { height: 85px; width: auto; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255,255,255,0.3)); }
.header-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.header-center h1 { font-size: 2.2rem; font-weight: 800; margin:0; line-height: 1.1; text-transform: uppercase; }
.header-center h2 { font-size: 1.2rem; color: var(--accent-color); margin: 5px 0 0 0; }
.header-right { text-align: right; }
#saat { font-size: 3rem; font-weight: 700; line-height: 1; }
#tarih { font-size: 1rem; color: var(--text-muted); text-transform: uppercase; }

footer { grid-area: footer; display: flex; align-items: center; overflow: hidden; background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); }
.marquee-badge { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: #fff; padding: 0 20px; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; min-width: 140px; clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); }
.live-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; margin-right: 10px; animation: blink-live 1.5s infinite; }
.marquee-container { flex: 1; height: 100%; position: relative; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.marquee-content { display: inline-block; padding-left: 100%; animation: marquee 20s linear infinite; font-size: 1.4rem; font-weight: 600; color: #fff; display: flex; align-items: center; height: 100%; }

/* =========================================
   5. TABLOLAR VE LİSTELER
   ========================================= */
table, tbody, tr, td, th { height: auto !important; white-space: nowrap !important; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.mini-table th { text-align: left; color: var(--text-muted); padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.1); }
.mini-table td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.nobet-ul li, .simple-list li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; }
.nobet-yer, .list-title { color: var(--accent-color); font-weight: 600; font-size: 1rem; }
.empty { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,0.3); font-style: italic; }

#havaDurumuKutusu { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.weather-temp { font-size: 3rem; font-weight: 700; color: #fff; }
#takvimListesi { height: 100%; display: flex; flex-direction: column; overflow: hidden !important; }

/* =========================================
   6. YÜZEN WIDGETLAR
   ========================================= */
#widgets-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; pointer-events: none; }
.floating-widget { 
    position: absolute; pointer-events: auto; 
    background: var(--glass-bg); border: 1px solid rgba(255, 255, 255, 0.2); 
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border-radius: 12px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); color: var(--text-main); 
    overflow: hidden; transition: transform 0.1s; min-width: 150px; 
}
#widget-isg { bottom: 100px; left: 30px; display: flex; align-items: center; padding: 10px 15px; gap: 15px; border-left: 5px solid #10b981; }
#widget-isg .widget-big-num { font-size: 1.8rem; font-weight: 800; line-height: 1; }
#widget-countdown { bottom: 100px; right: 30px; border-top: 4px solid var(--accent-color); text-align: center; }
#widget-countdown .widget-timer { display: flex; justify-content: center; gap: 8px; padding: 10px 15px; }
.timer-box span { font-size: 1.6rem; font-weight: 800; color: var(--accent-color); font-family: monospace; }

/* =========================================
   7. UI, EDİT MODU VE ANİMASYONLAR
   ========================================= */
#fullscreenBtn, #editModeBtn { position: fixed; bottom: 20px; width: 50px; height: 50px; opacity: 0; z-index: 2147483647; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; font-size: 1.2rem; transition: all 0.3s; pointer-events: auto; }
#fullscreenBtn:hover, #editModeBtn:hover { opacity: 1; background: var(--accent-color); }
#editModeBtn { right: 80px; } #fullscreenBtn { right: 20px; }

/* Edit Modu Çerçeveleri */
body.edit-mode .widget, body.edit-mode .media-box, body.edit-mode .floating-widget { cursor: grab !important; border: 2px dashed rgba(255,255,255,0.3) !important; }
body.edit-mode iframe, body.edit-mode video { pointer-events: none !important; opacity: 0.7; }

/* Resize Tutamacı (Sarı Çubuk) */
body.edit-mode .widget::after, body.edit-mode .media-box::after { 
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); 
    width: 50px; height: 8px; background: #facc15; border-radius: 4px 4px 0 0; 
    cursor: ns-resize; z-index: 99; display: block !important; 
}

/* Animasyonlar */
@keyframes blink-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
@keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); } 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes progress { from { width: 100%; } to { width: 0%; } }
@keyframes floatUp { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-120vh) rotate(20deg); } }
@keyframes color-pulse { 0%, 100% { color: #f472b6; text-shadow: 0 0 5px #f472b6; } 50% { color: #ef4444; text-shadow: 0 0 15px #ef4444; } }
@keyframes floatUpBalloon { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 0.9; } 100% { transform: translateY(-600px) rotate(20deg); opacity: 0; } }

/* Toast Bildirim */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 999999; }
.toast-box { position: relative; min-width: 300px; background: #1e293b; color: #fff; padding: 16px 20px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 15px; overflow: hidden; margin-bottom: 10px; border-left: 4px solid; font-size: 14px; animation: slideInLeft 0.4s forwards; }
.toast-box.success { border-left-color: #22c55e; } .toast-box.success i { color: #22c55e; }
.toast-box.error { border-left-color: #ef4444; } .toast-box.error i { color: #ef4444; }
.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: rgba(255,255,255,0.2); }
.toast-progress::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(255,255,255,0.7); animation: progress linear forwards; }

/* Özel Efektler (Milli/Dini) */
#theme-decoration { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; overflow: hidden; display: none; }
body.theme-milli #theme-decoration { display: block; }
body.theme-milli #theme-decoration::before { content: '\f6d1'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; font-size: 200px; color: rgba(255, 255, 255, 0.07); top: -40px; left: 20px; transform: rotate(15deg); z-index: 0; }
body.theme-dini #theme-decoration { display: block; }
body.theme-dini #theme-decoration::before { content: '\f683'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 80px; right: 5%; font-size: 150px; color: rgba(251, 191, 36, 0.15); animation: swing 4s ease-in-out infinite alternate; }
.current-lesson { background-color: rgba(56, 189, 248, 0.15); color: #fff; font-weight: 700; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transform: scale(1.02); animation: pulse-border 3s infinite; }
.efekt-neon { text-shadow: 0 0 5px #fff, 0 0 20px #0073e6; color: #fff !important; }
.efekt-golge { text-shadow: 2px 2px 0px #000, 4px 4px 0px rgba(0,0,0,0.3); font-weight: 800; }
.efekt-uyari { color: #ff4d4d !important; font-weight: bold; animation: blink-text 1s infinite; }

/* ============================================================
   8. TEMA PAKETLERİ (FULL KOLEKSİYON)
   ============================================================ */

/* --- RENKLİ TEMALAR --- */
body.theme-gold { background: #0c0a09; color: #e7e5e4; }
body.theme-gold header { background: linear-gradient(90deg, #1c1917, #000); border-bottom: 2px solid #d4af37; }
body.theme-gold footer { background: #1c1917; color: #d4af37; border-top: 1px solid #d4af37; }
body.theme-gold .widget, body.theme-gold .media-box { background: #1c1917 !important; border: 1px solid #d4af37 !important; color: #fff !important; box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2) !important; }
body.theme-gold .widget-header { background: linear-gradient(90deg, #d4af37, #b4912f) !important; color: #000 !important; }

body.theme-midnight { background: #000000; color: #cbd5e1; }
body.theme-midnight header { background: #0f172a; border-bottom: 1px solid #1e293b; }
body.theme-midnight .widget, body.theme-midnight .media-box { background: rgba(15, 23, 42, 0.9) !important; border: 1px solid #334155 !important; color: #94a3b8 !important; }
body.theme-midnight .widget-header { color: #64748b !important; border-bottom: 1px solid #334155 !important; background: transparent !important; }

body.theme-teal { background: #f0fdfa; color: #134e4a; }
body.theme-teal header { background: #0d9488; color: #fff; }
body.theme-teal footer { background: #115e59; color: #ccfbf1; }
body.theme-teal .widget, body.theme-teal .media-box { background: #fff !important; border: 2px solid #99f6e4 !important; color: #115e59 !important; }
body.theme-teal .widget-header { background: #ccfbf1 !important; color: #0f766e !important; }

body.theme-orange { background: #fff7ed; color: #431407; }
body.theme-orange header { background: linear-gradient(90deg, #ea580c, #c2410c); color: #fff; }
body.theme-orange footer { background: #7c2d12; color: #ffedd5; }
body.theme-orange .widget, body.theme-orange .media-box { background: #fff !important; border: 2px solid #fed7aa !important; color: #7c2d12 !important; }
body.theme-orange .widget-header { background: #ffedd5 !important; color: #c2410c !important; }

body.theme-city { background: #f0fdf4; color: #333; }
body.theme-city header { background: #15803d; color: white; border-bottom: 4px solid #16a34a; }
body.theme-city footer { background: #14532d; color: white; }
body.theme-city .widget, body.theme-city .media-box { background: #fff !important; border: 1px solid #86efac !important; color: #14532d !important; }
body.theme-city .widget-header { background: #dcfce7 !important; color: #166534 !important; }

body.theme-contrast { background: #000; color: #ffff00; font-family: 'Verdana', sans-serif; }
body.theme-contrast header { background: #000; border-bottom: 4px solid #ffff00; color: #ffff00; }
body.theme-contrast footer { background: #000; border-top: 4px solid #ffff00; color: #ffff00; }
body.theme-contrast .widget, body.theme-contrast .media-box { background: #000 !important; border: 2px solid #ffff00 !important; color: #ffff00 !important; border-radius: 0 !important; }
body.theme-contrast .widget-header { background: #ffff00 !important; color: #000 !important; font-weight: 900 !important; }

body.theme-purple { background: #2e1065; color: #e9d5ff; }
body.theme-purple header { background: linear-gradient(90deg, #581c87, #3b0764); border-bottom: 1px solid #7e22ce; }
body.theme-purple footer { background: #3b0764; color: #d8b4fe; }
body.theme-purple .widget, body.theme-purple .media-box { background: rgba(88, 28, 135, 0.6) !important; border: 1px solid #7e22ce !important; color: #fff !important; }
body.theme-purple .widget-header { background: rgba(59, 7, 100, 0.5) !important; color: #d8b4fe !important; }

/* --- EĞİTİM --- */
body.theme-school { background: #fdf2f8; color: #333; }
body.theme-school header { background: linear-gradient(90deg, #db2777, #9333ea); border: none; }
body.theme-school footer { background: #831843; }
body.theme-school .widget, body.theme-school .media-box { background: rgba(255,255,255,0.95); border: 2px solid #fce7f3; color: #333; }
body.theme-school .widget-header { background: #fce7f3; color: #be185d; }

body.theme-kindergarten { background: #fff0f5; color: #333; font-family: 'Comic Neue', cursive; }
body.theme-kindergarten header { background: linear-gradient(90deg, #ff9a9e, #fad0c4); }
body.theme-kindergarten footer { background: #a18cd1; color: #fff; }
body.theme-kindergarten .widget, body.theme-kindergarten .media-box { background: rgba(255,255,255,0.9) !important; border: 3px solid #ffdde1 !important; border-radius: 20px !important; color: #333 !important; }
body.theme-kindergarten .widget-header { background: #ffdde1 !important; color: #ff6b6b !important; }

body.theme-primary { background: #f0f9ff; color: #333; }
body.theme-primary header { background: #0284c7; color: #fff; }
body.theme-primary footer { background: #ea580c; color: #fff; }
body.theme-primary .widget, body.theme-primary .media-box { background: #fff !important; border: 2px solid #bae6fd !important; }
body.theme-primary .widget-header { background: #e0f2fe !important; color: #0284c7 !important; }

body.theme-middle { background: #fdf4ff; color: #333; }
body.theme-middle header { background: #7e22ce; color: #fff; }
body.theme-middle footer { background: #6b21a8; color: #fff; }
body.theme-middle .widget, body.theme-middle .media-box { background: #fff !important; border: 1px solid #d8b4fe !important; }
body.theme-middle .widget-header { background: #f3e8ff !important; color: #7e22ce !important; }

body.theme-private { background: #0f172a; color: #fff; }
body.theme-private header { background: linear-gradient(90deg, #1e293b, #0f172a); border-bottom: 2px solid #d4af37; }
body.theme-private footer { background: #1e293b; color: #d4af37; }
body.theme-private .widget, body.theme-private .media-box { background: #1e293b !important; border: 1px solid #334155 !important; color: #fff !important; }
body.theme-private .widget-header { background: #0f172a !important; color: #d4af37 !important; font-family: 'Playfair Display', serif; }

body.theme-tech { background: #e5e7eb; color: #1f2937; font-family: 'Rajdhani', sans-serif; }
body.theme-tech header { background: #374151; color: #fbbf24; border-bottom: 4px solid #fbbf24; }
body.theme-tech footer { background: #1f2937; color: #fbbf24; }
body.theme-tech .widget, body.theme-tech .media-box { background: #f9fafb !important; border: 1px solid #9ca3af !important; border-radius: 4px !important; }
body.theme-tech .widget-header { background: #d1d5db !important; color: #1f2937 !important; }

body.theme-teacherhouse { background: #fffbeb; color: #451a03; }
body.theme-teacherhouse header { background: #7f1d1d; color: #fef3c7; }
body.theme-teacherhouse footer { background: #991b1b; color: #fff; }
body.theme-teacherhouse .widget, body.theme-teacherhouse .media-box { background: #fff !important; border: 1px solid #fecaca !important; }
body.theme-teacherhouse .widget-header { background: #fef2f2 !important; color: #7f1d1d !important; }

body.theme-training { background: #f8fafc; color: #333; }
body.theme-training header { background: #475569; color: #fff; }
body.theme-training footer { background: #334155; color: #fff; }
body.theme-training .widget, body.theme-training .media-box { background: #fff !important; border: 1px solid #cbd5e1 !important; }
body.theme-training .widget-header { background: #f1f5f9 !important; color: #334155 !important; }

/* --- SAĞLIK --- */
body.theme-hospital { background: #f0f9ff; color: #333; }
body.theme-hospital header { background: #0ea5e9; }
body.theme-hospital footer { background: #0284c7; }
body.theme-hospital .widget, body.theme-hospital .media-box { background: rgba(255,255,255,0.95); border: 1px solid #bae6fd; }
body.theme-hospital .widget-header { background: #e0f2fe; color: #0369a1; }

body.theme-eye { background: #ecfeff; font-family: 'Rajdhani', sans-serif; color: #155e75; }
body.theme-eye header { background: #0891b2; color: #fff; }
body.theme-eye footer { background: #155e75; color: #fff; }
body.theme-eye .widget, body.theme-eye .media-box { background: #fff !important; border: 1px solid #a5f3fc !important; }
body.theme-eye .widget-header { background: #cffafe !important; color: #0891b2 !important; }

body.theme-dental { background: #f0fdfa; color: #134e4a; }
body.theme-dental header { background: #14b8a6; color: #fff; }
body.theme-dental footer { background: #0d9488; color: #fff; }
body.theme-dental .widget, body.theme-dental .media-box { background: rgba(255,255,255,0.9) !important; border: 1px solid #ccfbf1 !important; }
body.theme-dental .widget-header { background: #f0fdfa !important; color: #0f766e !important; }

body.theme-aesthetic { background: #fff1f2; font-family: 'Playfair Display', serif; color: #881337; }
body.theme-aesthetic header { background: linear-gradient(90deg, #be123c, #fb7185); color: #fff; }
body.theme-aesthetic footer { background: #881337; color: #fff; }
body.theme-aesthetic .widget, body.theme-aesthetic .media-box { background: #fff !important; border: 1px solid #fecdd3 !important; }
body.theme-aesthetic .widget-header { background: #fff1f2 !important; color: #be123c !important; }

body.theme-physio { background: #f7fee7; color: #365314; }
body.theme-physio header { background: #65a30d; color: #fff; border-bottom: 4px solid #365314; }
body.theme-physio footer { background: #365314; color: #ecfccb; }
body.theme-physio .widget, body.theme-physio .media-box { background: #fff !important; border: 1px solid #d9f99d !important; }
body.theme-physio .widget-header { background: #ecfccb !important; color: #4d7c0f !important; }

body.theme-asm { background: #fff; color: #333; }
body.theme-asm header { background: #dc2626; color: #fff; }
body.theme-asm footer { background: #991b1b; color: #fff; }
body.theme-asm .widget, body.theme-asm .media-box { background: #fef2f2 !important; border: 1px solid #fca5a5 !important; }
body.theme-asm .widget-header { background: #fee2e2 !important; color: #b91c1c !important; }

body.theme-pediatric { background: #fff; color: #4c1d95; }
body.theme-pediatric header { background: #8b5cf6; color: #fff; }
body.theme-pediatric footer { background: #7c3aed; color: #fff; }
body.theme-pediatric .widget, body.theme-pediatric .media-box { border: 2px dashed #ddd6fe !important; background: #f5f3ff !important; }
body.theme-pediatric .widget-header { color: #7c3aed !important; background: #ede9fe !important; }

/* --- KURUMSAL & KAMU --- */
body.theme-gov { background: #f8fafc; color: #333; font-family: 'Inter', sans-serif; }
body.theme-gov header { background: #ef4444; color: #fff; border-bottom: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
body.theme-gov footer { background: #ef4444; color: #fff; }
body.theme-gov .widget, body.theme-gov .media-box { background: #fff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; border-radius: 4px !important; }
body.theme-gov .widget-header { background: #f1f5f9 !important; color: #334155 !important; border-left: 4px solid #ef4444 !important; font-weight: 700 !important; }

body.theme-library { background: #fefce8; color: #422006; font-family: 'Georgia', serif; }
body.theme-library header { background: #854d0e; color: #fefce8; border-bottom: 2px solid #a16207; }
body.theme-library footer { background: #713f12; color: #fff; }
body.theme-library .widget, body.theme-library .media-box { background: #fff !important; border: 1px solid #fde047 !important; color: #422006 !important; }
body.theme-library .widget-header { background: #fef08a !important; color: #854d0e !important; }

body.theme-justice { background: #e5e5e5; color: #1c1917; }
body.theme-justice header { background: #451a03; color: #fff; border-bottom: 4px solid #78350f; }
body.theme-justice footer { background: #78350f; color: #fff; }
body.theme-justice .widget, body.theme-justice .media-box { background: #fff !important; border: 1px solid #a8a29e !important; color: #292524 !important; }
body.theme-justice .widget-header { background: #d6d3d1 !important; color: #44403c !important; text-transform: uppercase; font-weight: 800 !important; }

body.theme-holding { background: #0f172a; color: #fff; }
body.theme-holding header { background: #1e293b; border-bottom: 2px solid #3b82f6; }
body.theme-holding footer { background: #1e293b; color: #94a3b8; }
body.theme-holding .widget, body.theme-holding .media-box { background: #1e293b !important; border: 1px solid #334155 !important; color: #fff !important; }
body.theme-holding .widget-header { background: #0f172a !important; color: #fff !important; font-family: 'Times New Roman', serif; }

body.theme-agency { background: #fff; font-family: 'Poppins', sans-serif; color: #111; }
body.theme-agency header { background: linear-gradient(45deg, #ec4899, #8b5cf6); color: #fff; }
body.theme-agency footer { background: #111; color: #fff; }
body.theme-agency .widget, body.theme-agency .media-box { border: 2px solid #f0f0f0 !important; background: #fff !important; border-radius: 24px !important; }
body.theme-agency .widget-header { background: #fff !important; color: #111 !important; }

body.theme-callcenter { background: #111; color: #00ff00; font-family: 'Courier New', monospace; }
body.theme-callcenter header { background: #222; border-bottom: 1px solid #333; color: #00ff00; }
body.theme-callcenter footer { background: #222; color: #00ff00; }
body.theme-callcenter .widget, body.theme-callcenter .media-box { background: #000 !important; border: 1px solid #333 !important; color: #00ff00 !important; }
body.theme-callcenter .widget-header { background: #111 !important; color: #00ff00 !important; text-transform: uppercase !important; }

/* --- ÜRETİM --- */
body.theme-auto { background: #e2e8f0; font-family: 'Rajdhani', sans-serif; color: #0f172a; }
body.theme-auto header { background: #334155; color: #fff; border-bottom: 4px solid #ef4444; }
body.theme-auto footer { background: #1e293b; color: #fff; }
body.theme-auto .widget, body.theme-auto .media-box { background: #fff !important; border: 1px solid #94a3b8 !important; }
body.theme-auto .widget-header { background: #cbd5e1 !important; color: #0f172a !important; font-weight: 800 !important; }

body.theme-textile { background: #f0f9ff; color: #333; }
body.theme-textile header { background: #0369a1; color: #fff; }
body.theme-textile footer { background: #075985; color: #fff; }
body.theme-textile .widget, body.theme-textile .media-box { border: 1px solid #bae6fd !important; background: #fff !important; }
body.theme-textile .widget-header { background: #e0f2fe !important; color: #0284c7 !important; }

body.theme-food-prod { background: #fff; color: #333; }
body.theme-food-prod header { background: #16a34a; color: #fff; }
body.theme-food-prod footer { background: #ea580c; color: #fff; }
body.theme-food-prod .widget, body.theme-food-prod .media-box { border: 2px solid #dcfce7 !important; background: #fff !important; }
body.theme-food-prod .widget-header { background: #f0fdf4 !important; color: #15803d !important; }

body.theme-chem { background: #f8fafc; border: 10px solid #fff; box-sizing: border-box; }
body.theme-chem header { background: #fff; color: #334155; border-bottom: 2px solid #64748b; }
body.theme-chem footer { background: #fff; color: #475569; border-top: 1px solid #cbd5e1; }
body.theme-chem .widget, body.theme-chem .media-box { border: 1px solid #e2e8f0 !important; background: #fff !important; box-shadow: none !important; color: #333 !important; }
body.theme-chem .widget-header { background: #f1f5f9 !important; color: #334155 !important; }

body.theme-logistics { background: #1c1917; color: #fbbf24; font-family: 'Rajdhani', sans-serif; }
body.theme-logistics header { background: #f59e0b; color: #000; font-weight: 900; }
body.theme-logistics footer { background: #292524; color: #fbbf24; border-top: 2px solid #f59e0b; }
body.theme-logistics .widget, body.theme-logistics .media-box { background: #292524 !important; border: 1px solid #f59e0b !important; color: #fff !important; }
body.theme-logistics .widget-header { background: #000 !important; color: #f59e0b !important; }

body.theme-steel { background: #2b2b2b; color: #e5e5e5; }
body.theme-steel header { background: linear-gradient(90deg, #7f1d1d, #b91c1c); color: #fff; }
body.theme-steel footer { background: #450a0a; color: #fca5a5; }
body.theme-steel .widget, body.theme-steel .media-box { background: #444 !important; border: 1px solid #555 !important; color: #e5e5e5 !important; }
body.theme-steel .widget-header { background: #333 !important; color: #f87171 !important; }

/* --- İNŞAAT --- */
body.theme-construction { background: #fffaeb; font-family: 'Rajdhani', sans-serif; color: #000; }
body.theme-construction header { background: #facc15; color: #000; font-weight: 800; border-bottom: 5px solid #000; }
body.theme-construction footer { background: #000; color: #facc15; }
body.theme-construction .widget, body.theme-construction .media-box { background: #fff !important; border: 2px solid #000 !important; color: #000 !important; }
body.theme-construction .widget-header { background: #000 !important; color: #facc15 !important; }

body.theme-road { background: #27272a; color: #fb923c; font-family: 'Inter', sans-serif; }
body.theme-road header { background: #ea580c; color: #fff; font-weight: 800; }
body.theme-road footer { background: #27272a; color: #fb923c; border-top: 2px solid #ea580c; }
body.theme-road .widget, body.theme-road .media-box { background: #3f3f46 !important; border: 1px solid #f97316 !important; color: #fff !important; }
body.theme-road .widget-header { background: #18181b !important; color: #fb923c !important; }

body.theme-dam { background: #eff6ff; color: #1e3a8a; }
body.theme-dam header { background: #1d4ed8; color: #fff; }
body.theme-dam footer { background: #1e3a8a; color: #fff; }
body.theme-dam .widget, body.theme-dam .media-box { background: #fff !important; border: 2px solid #93c5fd !important; }
body.theme-dam .widget-header { background: #dbeafe !important; color: #1e40af !important; }

body.theme-tunnel { background: #000; color: #facc15; }
body.theme-tunnel header { background: #000; border-bottom: 2px dashed #facc15; color: #facc15; }
body.theme-tunnel footer { background: #000; color: #fff; border-top: 1px solid #333; }
body.theme-tunnel .widget, body.theme-tunnel .media-box { background: #1c1917 !important; border: 1px solid #444 !important; color: #e5e5e5 !important; }
body.theme-tunnel .widget-header { background: #333 !important; color: #facc15 !important; }

/* --- RESTORAN --- */
body.theme-cafe { background: #fffbeb; font-family: 'Playfair Display', serif; color: #78350f; } 
body.theme-cafe header { background: #78350f; color: #fef3c7; } 
body.theme-cafe footer { background: #78350f; color: #fff; } 
body.theme-cafe .widget, body.theme-cafe .media-box { background: #fff !important; border: 1px solid #fde68a !important; } 
body.theme-cafe .widget-header { background: #fde68a !important; color: #78350f !important; }

body.theme-steak { background: #1a0505; color: #fca5a5; font-family: 'Playfair Display', serif; }
body.theme-steak header { background: #450a0a; color: #fca5a5; border-bottom: 1px solid #7f1d1d; }
body.theme-steak footer { background: #450a0a; color: #fff; }
body.theme-steak .widget, body.theme-steak .media-box { background: #2a0a0a !important; border: 1px solid #7f1d1d !important; color: #fca5a5 !important; }
body.theme-steak .widget-header { background: #000 !important; color: #fca5a5 !important; letter-spacing: 2px !important; }

body.theme-burger { background: #fff7ed; font-family: 'Inter', sans-serif; color: #c2410c; }
body.theme-burger header { background: #ea580c; color: #fff; font-weight: 900; }
body.theme-burger footer { background: #c2410c; color: #fff; }
body.theme-burger .widget, body.theme-burger .media-box { background: #fff !important; border: 3px solid #fdba74 !important; border-radius: 20px !important; }
body.theme-burger .widget-header { background: #ffedd5 !important; color: #c2410c !important; font-weight: 800 !important; }

body.theme-sushi { background: #18181b; color: #fff; }
body.theme-sushi header { background: #000; border-bottom: 2px solid #ef4444; }
body.theme-sushi footer { background: #000; color: #ef4444; }
body.theme-sushi .widget, body.theme-sushi .media-box { background: #27272a !important; border: none !important; border-left: 4px solid #ef4444 !important; border-radius: 0 !important; }
body.theme-sushi .widget-header { background: #27272a !important; color: #fff !important; font-weight: 300 !important; letter-spacing: 3px !important; }

body.theme-bakery { background: #fdf2f8; font-family: 'Comic Neue', cursive; color: #be185d; }
body.theme-bakery header { background: #fbcfe8; color: #db2777; }
body.theme-bakery footer { background: #db2777; color: #fff; }
body.theme-bakery .widget, body.theme-bakery .media-box { background: #fff !important; border: 2px dashed #f9a8d4 !important; border-radius: 20px !important; }
body.theme-bakery .widget-header { background: #fce7f3 !important; color: #be185d !important; }

body.theme-kebab { background: #fef2f2; color: #991b1b; }
body.theme-kebab header { background: #b91c1c; color: #fff; border-bottom: 4px solid #fcd34d; }
body.theme-kebab footer { background: #991b1b; color: #fff; }
body.theme-kebab .widget, body.theme-kebab .media-box { background: #fff !important; border: 1px solid #fecaca !important; }
body.theme-kebab .widget-header { background: #fee2e2 !important; color: #991b1b !important; font-weight: bold !important; }

/* --- EMLAK --- */
body.theme-luxury-home { background: #000; color: #d6d3d1; font-family: 'Playfair Display', serif; }
body.theme-luxury-home header { background: #000; color: #d4af37; border-bottom: 1px solid #d4af37; }
body.theme-luxury-home footer { background: #1c1917; color: #d4af37; }
body.theme-luxury-home .widget, body.theme-luxury-home .media-box { background: #1c1917 !important; border: 1px solid #333 !important; color: #d6d3d1 !important; }
body.theme-luxury-home .widget-header { background: #000 !important; color: #fff !important; letter-spacing: 1px !important; }

body.theme-summer { background: #ecfeff; color: #0e7490; }
body.theme-summer header { background: #06b6d4; color: #fff; }
body.theme-summer footer { background: #0891b2; color: #fff; }
body.theme-summer .widget, body.theme-summer .media-box { background: rgba(255,255,255,0.8) !important; border: 1px solid #67e8f9 !important; }
body.theme-summer .widget-header { background: #cffafe !important; color: #0e7490 !important; }

body.theme-project { background: #1e293b; color: #fff; }
body.theme-project header { background: #0f172a; color: #38bdf8; font-weight: 800; }
body.theme-project footer { background: #0f172a; color: #94a3b8; }
body.theme-project .widget, body.theme-project .media-box { background: #334155 !important; border: 1px solid #475569 !important; color: #fff !important; }
body.theme-project .widget-header { background: #1e293b !important; color: #38bdf8 !important; }

body.theme-land { background: #f0fdf4; color: #14532d; }
body.theme-land header { background: #15803d; color: #fff; }
body.theme-land footer { background: #166534; color: #fff; }
body.theme-land .widget, body.theme-land .media-box { background: #fff !important; border: 1px solid #86efac !important; }
body.theme-land .widget-header { background: #dcfce7 !important; color: #15803d !important; }

body.theme-realestate { background: #f8fafc; color: #334155; } 
body.theme-realestate header { background: #0f172a; color: #fff; } 
body.theme-realestate footer { background: #334155; color: #fff; } 
body.theme-realestate .widget, body.theme-realestate .media-box { background: #fff !important; border: 1px solid #e2e8f0 !important; } 
body.theme-realestate .widget-header { background: #f1f5f9 !important; color: #0f172a !important; }

/* --- SPOR (Diğerleri) --- */
body.theme-gym { background: #111; color: #ccff00; font-family: 'Arial Black', sans-serif; }
body.theme-gym header { background: #000; border-bottom: 2px solid #ccff00; color: #ccff00; }
body.theme-gym footer { background: #000; color: #ccff00; }
body.theme-gym .widget, body.theme-gym .media-box { background: #222 !important; border: 1px solid #333 !important; color: #fff !important; }
body.theme-gym .widget-header { background: #000 !important; color: #fff !important; font-style: italic !important; }

body.theme-pool { background: #ecfeff; color: #155e75; }
body.theme-pool header { background: #06b6d4; color: #fff; }
body.theme-pool footer { background: #155e75; color: #fff; }
body.theme-pool .widget, body.theme-pool .media-box { background: rgba(255,255,255,0.8) !important; border: 1px solid #67e8f9 !important; }
body.theme-pool .widget-header { background: #cffafe !important; color: #0891b2 !important; }

body.theme-tennis { background: #f0fdf4; color: #14532d; }
body.theme-tennis header { background: #15803d; color: #fff; border-bottom: 4px solid #fff; }
body.theme-tennis footer { background: #14532d; color: #fff; }
body.theme-tennis .widget, body.theme-tennis .media-box { background: #fff !important; border: 2px solid #86efac !important; }
body.theme-tennis .widget-header { background: #dcfce7 !important; color: #166534 !important; }

body.theme-stadium { background: #1a2e05; color: #fff; }
body.theme-stadium header { background: #365314; color: #fff; border-bottom: 2px solid #84cc16; }
body.theme-stadium footer { background: #365314; color: #bef264; }
body.theme-stadium .widget, body.theme-stadium .media-box { background: #14532d !important; border: 1px solid #3f6212 !important; color: #fff !important; }
body.theme-stadium .widget-header { background: #3f6212 !important; color: #ecfccb !important; }

body.theme-yoga { background: #fdf4ff; font-family: 'Playfair Display', serif; color: #581c87; }
body.theme-yoga header { background: #a855f7; color: #fff; }
body.theme-yoga footer { background: #6b21a8; color: #f3e8ff; }
body.theme-yoga .widget, body.theme-yoga .media-box { background: #fff !important; border: 1px solid #e9d5ff !important; }
body.theme-yoga .widget-header { background: #f3e8ff !important; color: #7e22ce !important; }

body.theme-dojo { background: #000; color: #ef4444; font-family: 'Rajdhani', sans-serif; }
body.theme-dojo header { background: #7f1d1d; color: #fff; border-bottom: 4px solid #000; }
body.theme-dojo footer { background: #000; color: #ef4444; border-top: 1px solid #7f1d1d; }
body.theme-dojo .widget, body.theme-dojo .media-box { background: #111 !important; border: 1px solid #450a0a !important; color: #fff !important; }
body.theme-dojo .widget-header { background: #000 !important; color: #fca5a5 !important; }

/* --- İNANÇ --- */
body.theme-mosque { background: #f0fdfa; font-family: 'Times New Roman', serif; color: #134e4a; }
body.theme-mosque header { background: #0f766e; color: #fff; }
body.theme-mosque footer { background: #134e4a; color: #ccfbf1; }
body.theme-mosque .widget, body.theme-mosque .media-box { background: #fff !important; border: 1px solid #99f6e4 !important; }
body.theme-mosque .widget-header { background: #ccfbf1 !important; color: #0f766e !important; }

body.theme-mufti { background: #f0fdfa; font-family: 'Times New Roman', serif; color: #134e4a; }
body.theme-mufti header { background: #0f766e; color: #fff; }
body.theme-mufti footer { background: #134e4a; color: #ccfbf1; }
body.theme-mufti .widget, body.theme-mufti .media-box { background: #fff !important; border: 1px solid #99f6e4 !important; }
body.theme-mufti .widget-header { background: #ccfbf1 !important; color: #0f766e !important; }

body.theme-cemevi { background: #fffbeb; font-family: 'Georgia', serif; color: #451a03; }
body.theme-cemevi header { background: #92400e; color: #fff; }
body.theme-cemevi footer { background: #78350f; color: #fef3c7; }
body.theme-cemevi .widget, body.theme-cemevi .media-box { background: #fff !important; border: 1px solid #fcd34d !important; }
body.theme-cemevi .widget-header { background: #fef3c7 !important; color: #92400e !important; }

body.theme-course { background: #ecfdf5; color: #064e3b; }
body.theme-course header { background: #059669; color: #fff; }
body.theme-course footer { background: #064e3b; color: #fff; }
body.theme-course .widget, body.theme-course .media-box { background: #fff !important; border: 2px dashed #6ee7b7 !important; }
body.theme-course .widget-header { background: #d1fae5 !important; color: #047857 !important; }

/* --- OTEL --- */
body.theme-resort { background: #0c0a09; color: #e7e5e4; font-family: 'Playfair Display', serif; }
body.theme-resort header { background: #1c1917; color: #d4af37; border-bottom: 1px solid #d4af37; }
body.theme-resort footer { background: #1c1917; color: #d4af37; }
body.theme-resort .widget, body.theme-resort .media-box { background: #1c1917 !important; border: 1px solid #44403c !important; color: #e7e5e4 !important; }
body.theme-resort .widget-header { background: #292524 !important; color: #d4af37 !important; font-style: italic !important; }

body.theme-business-hotel { background: #f1f5f9; color: #334155; }
body.theme-business-hotel header { background: #334155; color: #fff; }
body.theme-business-hotel footer { background: #475569; color: #cbd5e1; }
body.theme-business-hotel .widget, body.theme-business-hotel .media-box { background: #fff !important; border: 1px solid #cbd5e1 !important; }
body.theme-business-hotel .widget-header { background: #e2e8f0 !important; color: #334155 !important; }

body.theme-boutique { background: #fffbeb; font-family: 'Inter', sans-serif; color: #78350f; }
body.theme-boutique header { background: #92400e; color: #fff; }
body.theme-boutique footer { background: #78350f; color: #fef3c7; }
body.theme-boutique .widget, body.theme-boutique .media-box { background: #fff !important; border: 1px solid #fcd34d !important; }
body.theme-boutique .widget-header { background: #fef3c7 !important; color: #92400e !important; }

body.theme-ski { background: #f0f9ff; color: #0c4a6e; }
body.theme-ski header { background: #0ea5e9; color: #fff; }
body.theme-ski footer { background: #0284c7; color: #fff; }
body.theme-ski .widget, body.theme-ski .media-box { background: rgba(255,255,255,0.8) !important; border: 2px solid #bae6fd !important; }
body.theme-ski .widget-header { background: #e0f2fe !important; color: #0369a1 !important; }

body.theme-spa { background: #ecfccb; color: #365314; }
body.theme-spa header { background: #4d7c0f; color: #fff; }
body.theme-spa footer { background: #365314; color: #ecfccb; }
body.theme-spa .widget, body.theme-spa .media-box { background: #fff !important; border: 1px solid #bef264 !important; }
body.theme-spa .widget-header { background: #d9f99d !important; color: #3f6212 !important; }

body.theme-convention { background: #f3f4f6; color: #333; }
body.theme-convention header { background: #b91c1c; color: #fff; }
body.theme-convention footer { background: #1f2937; color: #fff; }
body.theme-convention .widget, body.theme-convention .media-box { background: #fff !important; border: 1px solid #d1d5db !important; }
body.theme-convention .widget-header { background: #e5e7eb !important; color: #111 !important; font-weight: bold !important; }
/* style.css EN ALTINA EKLE */

/* Medya kutuları asla çökmesin */
.media-box {
  display: flex !important;
  flex-direction: column !important;
  min-height: 200px !important; /* En kötü ihtimalle 200px görünür */
}

/* İçindeki resim ve video tam otursun */
.media-box img, 
.media-box video, 
.media-box iframe,
.media-box .content-area {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
/* style.css -> EN ALTA EKLE */

/* Medya kutularının görünürlüğünü garantiye al */
.media-box {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1; /* Diğer öğelerin altında kalmasın */
}

/* Slayt resimlerini ön plana çıkar */
.media-box img.active-slide {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 2; /* Arkaplanın üzerinde olsun */
}

/* Etiketi en üste koy (Slayt 1, Slayt 2 yazısı) */
.media-label {
  z-index: 10 !important;
}
/* style.css -> EN ALTA EKLE */

/* 1. KUTULARIN ÇÖKMESİNİ ENGELLE (Beton Etkisi) */
.media-box, .widget {
  /* İçerik olmasa bile en az bu kadar yer kapla */
  min-height: 300px !important; 
  height: auto;
  
  /* İçerik taşarsa gizle ama kutuyu bozma */
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

/* 2. GÖRÜNÜR RESIZE TUTAMACI (Sarı Çubuk) */
/* Sadece Edit Modunda Görünür */
body.edit-mode .widget::after, 
body.edit-mode .media-box::after { 
  content: '↔ Boyutlandır'; /* Yazı veya ikon */
  position: absolute; 
  bottom: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  
  /* Görünüm Ayarları */
  width: 120px; 
  height: 25px; 
  background: #f59e0b; /* Turuncu/Sarı */
  color: #000;
  
  /* Şekil Ayarları */
  border-radius: 10px 10px 0 0; 
  font-size: 11px;
  font-weight: bold;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: ns-resize; /* İmleci değiştir */
  z-index: 1000; /* Her şeyin üstünde olsun */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
  pointer-events: none; /* Tıklamayı engelleme, sadece görsel */
}

/* Edit modunda kutuların sınırlarını netleştir */
body.edit-mode .widget, 
body.edit-mode .media-box {
  border: 2px dashed rgba(255, 255, 255, 0.5) !important;
  background: rgba(0, 0, 0, 0.2) !important; /* Hafif kararart ki yerini gör */
}
/* =========================================
   1. GÜVENLİ GENEL AYARLAR
   (Bu kısım bilgisayarda da çalışır ama görünümü bozmaz, aksine taşmaları engeller)
   ========================================= */

/* Resimler asla kapsayıcısından dışarı taşmasın (Bilgisayarda da hayat kurtarır) */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* =========================================
   2. MOBİL ÖZEL AYARLAR (KORUMALI ALAN)
   (Bu parantezin içi SADECE TELEFONDA çalışır. Bilgisayar burayı OKUMAZ.)
   ========================================= */
@media (max-width: 768px) {

    /* Header'ı (Logo ve Geri Dön butonu) alt alta al */
    .nav, .header-area {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    /* Mobilde logoyu biraz küçült, çok yer kaplamasın */
    .logo {
        font-size: 20px;
        margin-bottom: 5px;
    }

    /* Geri dön butonunu tam genişlik yap, parmakla basması kolay olsun */
    .back-btn, .back-link {
        width: 100%;
        justify-content: center;
        background: rgba(255,255,255,0.1); /* Hafif arka plan */
        padding: 12px;
        border-radius: 8px;
    }

    /* Form elemanlarını ve butonları büyüt (Parmak dostu) */
    .btn, .form-control, button, input, select, textarea {
        font-size: 16px !important; /* Yazılar okunsun */
        padding: 15px !important;   /* Basma alanı genişlesin */
        min-height: 50px;           /* Yükseklik artsın */
    }

    /* Contact sayfasındaki grid yapısını tek sütuna düşür */
    .contact-grid, .profile-grid {
        display: block; /* Grid'i iptal et, alt alta dizz */
    }

    /* Kartların arasındaki boşluğu ayarla */
    .info-card, .card {
        margin-bottom: 30px;
    }
}
/* =========================================
   GENİŞLETİLMİŞ TEMA PAKETİ (55+ TEMA)
   ========================================= */

/* 🌑 KOYU GRUP */
body.theme-obsidian { --bg-color: #000000; --accent-color: #ffffff; --glass-bg: rgba(255,255,255,0.05); }
body.theme-slate { --bg-color: #1e293b; --accent-color: #38bdf8; }
body.theme-charcoal { --bg-color: #171717; --accent-color: #f5f5f5; }
body.theme-abyss { --bg-color: #020617; --accent-color: #60a5fa; }
body.theme-deep-space { --bg-color: #050505; --accent-color: #a855f7; }
body.theme-onyx { --bg-color: #0f0f0f; --accent-color: #fbbf24; }
body.theme-graphite { --bg-color: #27272a; --accent-color: #e4e4e7; }
body.theme-carbon { background: #111; background-image: radial-gradient(#222 1px, transparent 0); background-size: 20px 20px; }

/* 🏢 KURUMSAL GRUP */
body.theme-navy { --bg-color: #001f3f; --accent-color: #39cccc; }
body.theme-royal { --bg-color: #002366; --accent-color: #f1c40f; }
body.theme-indigo { --bg-color: #312e81; --accent-color: #818cf8; }
body.theme-cobalt { --bg-color: #0047ab; --accent-color: #ffffff; }
body.theme-sapphire { --bg-color: #0f172a; --accent-color: #2563eb; }
body.theme-petrol { --bg-color: #083344; --accent-color: #22d3ee; }
body.theme-oxford { --bg-color: #002147; --accent-color: #f8fafc; }
body.theme-denim { --bg-color: #1e3a8a; --accent-color: #93c5fd; }

/* 🌿 DOĞA GRUP */
body.theme-forest { --bg-color: #064e3b; --accent-color: #34d399; }
body.theme-emerald { --bg-color: #065f46; --accent-color: #10b981; }
body.theme-moss { --bg-color: #365314; --accent-color: #a3e635; }
body.theme-olive { --bg-color: #3f6212; --accent-color: #fde047; }
body.theme-jungle { --bg-color: #022c22; --accent-color: #4ade80; }
body.theme-mint { --bg-color: #ecfdf5; --text-main: #065f46; --accent-color: #10b981; --glass-bg: rgba(255,255,255,0.8); }

/* 🌈 GRADYAN GRUP (Görsel Şölen) */
body.theme-grad-sunset { background: linear-gradient(135deg, #4c1d95 0%, #db2777 50%, #f59e0b 100%) !important; }
body.theme-grad-ocean { background: linear-gradient(135deg, #0f172a 0%, #0369a1 50%, #0d9488 100%) !important; }
body.theme-grad-purple { background: linear-gradient(135deg, #2e1065 0%, #7e22ce 100%) !important; }
body.theme-grad-fire { background: linear-gradient(135deg, #450a0a 0%, #991b1b 50%, #ea580c 100%) !important; }
body.theme-grad-aurora { background: linear-gradient(135deg, #020617 0%, #1e1b4b 30%, #312e81 60%, #064e3b 100%) !important; --accent-color: #4ade80; }
body.theme-grad-cyber { background: linear-gradient(135deg, #000000 0%, #1e1b4b 100%) !important; --accent-color: #f472b6; }
body.theme-grad-nebula { background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%) !important; --accent-color: #06b6d4; }
body.theme-grad-lemon { background: linear-gradient(135deg, #14532d 0%, #65a30d 100%) !important; --accent-color: #fde047; }
body.theme-grad-morning { background: linear-gradient(135deg, #0ea5e9 0%, #f472b6 100%) !important; }

/* 🌸 PASTEL & SOFT GRUP */
body.theme-lavender { --bg-color: #f5f3ff; --text-main: #4c1d95; --accent-color: #8b5cf6; --glass-bg: rgba(255,255,255,0.7); }
body.theme-sky { --bg-color: #f0f9ff; --text-main: #0c4a6e; --accent-color: #0ea5e9; --glass-bg: rgba(255,255,255,0.7); }
body.theme-peach { --bg-color: #fff7ed; --text-main: #7c2d12; --accent-color: #fb923c; --glass-bg: rgba(255,255,255,0.7); }
body.theme-cream { --bg-color: #fffbeb; --text-main: #451a03; --accent-color: #92400e; }

/* 🔥 CANLI RENKLER */
body.theme-lime { --bg-color: #022c22; --accent-color: #bef264; }
body.theme-crimson { --bg-color: #4c0519; --accent-color: #e11d48; }
body.theme-pink { --bg-color: #500724; --accent-color: #f472b6; }

/* 💎 LÜKS GRUP */
body.theme-gold { --bg-color: #0c0a09; --accent-color: #facc15; border-top: 5px solid #facc15; }
body.theme-silver { --bg-color: #18181b; --accent-color: #d4d4d8; }
body.theme-rose { --bg-color: #450a0a; --accent-color: #fda4af; }
body.theme-platinum { --bg-color: #f8fafc; --text-main: #334155; --accent-color: #94a3b8; }
body.theme-marble { background: #f1f5f9; background-image: radial-gradient(#e2e8f0 2px, transparent 0); background-size: 30px 30px; --text-main: #1e293b; --accent-color: #64748b; }

/* 👁️ ERİŞİLEBİLİRLİK */
body.theme-mono { --bg-color: #ffffff; --text-main: #000000; --accent-color: #000000; --glass-bg: #fff; border: 2px solid #000; }
body.theme-contrast { --bg-color: #000000; --text-main: #ffff00; --accent-color: #ffff00; --glass-bg: #000; border: 2px solid #ffff00; }

/* 1. Önce kutuyu bir "konteyner" olarak tanımlıyoruz */
#havaDurumuKutusu {
    container-type: inline-size;  /* Kutunun kendi genişliğini referans almasını sağlar */
    padding: 0px !important;
    margin: 0px !important;
    display: flex;
    flex-direction: column;
    gap: 0px; /* Boşluklar kutu büyüdükçe artar */
    width: 100% !important;
}
#havaDurumuKutusu i.fa-solid {
    color: #facc15 !important; /* [DEĞİŞTİR] İkon rengi (Sarı) */
    filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.3)); /* Hafif parlama efekti */
}
.col-main .temp-val { 
    font-size: clamp(2.5rem, 13cqw, 5.5rem) !important; 
    font-weight: 900 !important; /* [DEĞİŞTİR] Kalınlık (En kalın seviye) */
    letter-spacing: -2px;
}

/* 3. Metin Kaydırma: "Parçalı Az Bulutlu" gibi yazıları alt alta zorlar */
.col-details .weather-desc {
    font-weight: bold; 
    color: #facc15; 
    margin-bottom: 2px;
    max-width: 85px; /* [DEĞİŞTİR] Yazı bu genişliği aşınca alt satıra geçer (Px ile oynayabilirsin) */
    line-height: 1.1;
    word-wrap: break-word;
    display: inline-block;
}

/* 4. Yağış Yüzdesi Stili */
.precip-val {
    color: #38bdf8; /* Yağış için açık mavi ton */
    font-weight: bold;
}
/* 2. Yazı ve İkon Boyutlarını Dinamik Yapıyoruz */
/* style.css - Merkezi ve 2x2 Matrisli Tasarım */

/* 1. Başlık: İlk Harfler Büyük ve Ortada */
.city-name { 
    font-size: clamp(1.2rem, 6cqw, 2.5rem) !important; 
    font-weight: 900 !important;
    color: var(--accent-color);
    text-align: center; /* [DÜZELTME] Başlığı ortalar */
    text-transform: capitalize; /* [DÜZELTME] İlk harfleri büyük yapar */
    margin-bottom: 0px !important;
}

/* 2. Ana Izgara: 3 Sütun ve İçerik Hizalama */
.weather-triple-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* [DÜZELTME] Sütunları eşit ve dengeli yapar */
    align-items: center;
    text-align: center; /* [DÜZELTME] Tüm verileri sütun içinde yatayda ortalar */
    gap: 1cqw;
    background: rgba(255, 255, 255, 0.05);
    padding: 2cqw 0px;
    width: 100% !important;
}

/* Sol Sütun: Nem ve Rüzgar (Alt alta ama ortalı) */
.col-details {
    display: flex;
    flex-direction: column;
    align-items: center; /* [DÜZELTME] İçeriği dikey eksende ortalar */
    font-size: clamp(0.65rem, 3.2cqw, 1.1rem); 
    line-height: 1.2;
    border-right: 1px solid rgba(255,255,255,0.1);
    
}

.col-details div {
    text-transform: capitalize; /* [DÜZELTME] Açıklamanın ilk harflerini büyük yapar */
}

/* Orta Sütun: İkon ve Derece Yan Yana */
.col-main {
    display: flex;
    align-items: center;
    justify-content: center; /* [DÜZELTME] İkon ve dereceyi tam ortada birleştirir */
    gap: 5px; 
    border-right: 1px solid rgba(255,255,255,0.1);
}

.col-main i { font-size: clamp(2rem, 10cqw, 4.5rem) !important; }
.col-main .temp-val { font-size: clamp(2.5rem, 13cqw, 5.5rem) !important; }

/* Sağ Sütun: 2 Üstte 2 Altta Tahminler (2x2 Matris) */
.col-forecast {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* [DÜZELTME] 2 sütun yapar */
    grid-template-rows: repeat(2, 1fr);    /* [DÜZELTME] 2 satır yapar */
    gap: 4px;
    height: 100%;
}

.mini-forecast-card {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#widget-havaDurumu .widget-header {
    margin-bottom: 2px !important; /* Standartta 10px'dir, 2px'e düşürdük */
}
/* ======================================================
   ANA PANO (VIEW) AKIŞKAN MOBİL UYUM (FIXED OVERFLOW)
   ====================================================== */

@media (max-width: 1024px) {
    /* 1. KRİTİK: Body üzerindeki kilidi açıyoruz */
    html, body {
        overflow: auto !important; /* Kaydırma kilidini mobilde kırar */
        height: auto !important;
        position: relative;
    }

    /* 2. Ana Kapsayıcı Ayarları */
    .dashboard-container {
        display: flex !important;
        flex-direction: column !important; /* Sütunları alt alta dizer */
        height: auto !important;
        min-height: 100vh;
        overflow-x: auto !important; /* Sağa sola kaydırmayı aktif eder */
        overflow-y: visible !important; /* Dikey kaydırmayı serbest bırakır */
        -webkit-overflow-scrolling: touch; /* iOS için akıcılık sağlar */
        padding: 10px !important;
        gap: var(--gap) !important;
    }

    /* 3. Sütunların Daralmasını Önle (Sağa sola kayma için kritik) */
    #col-1, #col-2, #col-3, #col-4 {
        width: 100% !important;
        min-width: 320px; /* Çok küçük ekranlarda bile minimum genişliği korur */
        flex: none !important;
        height: auto !important;
    }

    /* 4. Yüzen Widget'lar: Ekrana Çivili Kalsın */
    #widgets-layer {
        position: fixed !important; /* Sayfa aksa da bunlar ekranda kalır */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 9999;
    }

    .floating-widget {
        position: fixed !important;
        pointer-events: auto;
        transform: none !important; /* Bilgisayardaki koordinatları sıfırlar */
    }

    /* 5. Alt Duyuru Çubuğu */
    #footerSection {
        position: sticky !important;
        bottom: 0;
        z-index: 1001;
        width: 100% !important;
    }

    /* 6. Header Mobilde Daralmasın */
    header {
        height: auto !important;
        flex-direction: column !important;
        gap: 10px;
        padding: 10px !important;
    }
}