/* =========================================================
   Enertak – AdminLTE v3 Esinli Tasarım
   Dosya: style.css
   Not: Hiçbir eski stil dosyasına ihtiyaç yoktur.
   ========================================================= */

/* ---------- Temel Ayarlar ---------- */
:root{
  --bg-body: #f4f6f9;
  --bg-card: #ffffff;
  --bg-navbar: #1f2d3d;      /* koyu üst bar */
  --bg-sidebar: #1a2c3b;     /* koyu sol menü */
  --bg-sidebar-hover: #273e52;

  --text-main: #1f2937;
  --text-muted: #6b7280;
  --border-soft: #e5e7eb;
  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 4px 10px rgba(0,0,0,.06);

  /* Kart / small-box renkleri */
  --blue-1: #3c8dbc;
  --blue-2: #0073b7;
  --green-1: #00a65a;
  --green-2: #008d4c;
  --yellow-1: #f39c12;
  --yellow-2: #db8b0b;
  --red-1: #dd4b39;
  --red-2: #c23321;
  --purple-1: #605ca8;
  --purple-2: #555299;
  --teal-1: #20c997;
  --teal-2: #17a2b8;

  --primary: #3498db;
  --primary-hover: #2d89c6;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f59e0b;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font: 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color: var(--text-main);
  background: var(--bg-body);
}

/* ---------- Yardımcılar ---------- */
.hidden{ display:none !important; }
.center{ text-align:center; }
.m-0{ margin:0 !important; }
.mt-1{ margin-top:8px !important; }
.mt-2{ margin-top:16px !important; }
.mt-3{ margin-top:24px !important; }
.mb-1{ margin-bottom:8px ! important; }
.mb-2{ margin-bottom:16px !important; }
.mb-3{ margin-bottom:24px !important; }
.p-0{ padding:0 !important; }
.p-1{ padding:8px !important; }
.p-2{ padding:16px !important; }
.round{ border-radius:8px; }

/* =========================================================
   NAVBAR (Üst Bar)
   ========================================================= */
.main-header{
  position:fixed; inset:0 0 auto 0; height:56px; z-index:1030;
  background: var(--bg-navbar); color:#fff; display:flex; align-items:center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.main-header .brand-area{
  display:flex; align-items:center; gap:10px; padding:0 16px;
}
.main-header .navbar-title{
  color:#e9eef5; font-weight:600; letter-spacing:.2px; text-decoration:none;
}
.nav-btn{
  background:transparent; border:none; color:#fff; padding:8px 10px; cursor:pointer; border-radius:6px;
}
.nav-btn:hover{ background: rgba(255,255,255,.08); }

/* Profil dropdown */
.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute; right:0; top:44px; min-width:220px;
  background:#fff; color:#111; border-radius:10px; box-shadow:0 10px 25px rgba(0,0,0,.12);
  display:none; overflow:hidden;
}
.dropdown.open .dropdown-menu{ display:block; }
.dropdown-menu a{
  display:flex; align-items:center; gap:8px; padding:10px 12px; color:#374151; text-decoration:none;
}
.dropdown-menu a:hover{ background:#f3f4f6; }
.dropdown-header{
  padding:12px; background:#f9fafb; font-weight:600; border-bottom:1px solid var(--border-soft);
}

/* =========================================================
   LAYOUT: Sidebar + Content
   ========================================================= */
body{ padding-top:0px; }

#sidebar{
  position:fixed; top:56px; left:0; width:250px; height:calc(100% - 56px);
  background: var(--bg-sidebar); color:#b0bec5; transform: translateX(-250px);
  transition: transform .3s ease; z-index:1001; overflow-y:auto;
  box-shadow: 2px 0 10px rgba(0,0,0,.08);
}
#sidebar.open{ transform: translateX(0); }
#sidebar a{
  display:block; padding:10px 15px; color:#b0bec5; text-decoration:none; font-size:14px;
}
#sidebar a:hover{ color:#fff; background: var(--bg-sidebar-hover); }
#sidebar .close-btn{
  position:absolute; top:6px; right:10px; font-size:30px; color:#9aa8b0; text-decoration:none;
}
.sidebar-divider{ height:1px; background:#2c3e50; margin:10px 15px; border:0; }
.sidebar-heading{
  padding:0 15px; margin:12px 0 6px; font-size:11px; font-weight:700; color:#8ba2b2; text-transform:uppercase; letter-spacing:.06em;
}
.user-panel{ padding:10px 15px; }
.user-panel span{ display:block; }
.user-panel .logout-link{ color:#ff7b72 !important; font-weight:600; }

#overlay{
  position:fixed; inset:56px 0 0 0; background:rgba(0,0,0,.45); display:none; z-index:1000;
}
#overlay.show{ display:block; }

.content-wrapper{
  min-height: calc(100vh - 56px);
  transition: margin-left .3s ease;
}
.content-wrapper.with-sidebar{ margin-left:250px; }

/* =========================================================
   CONTAINER + SAYFA BAŞLIK
   ========================================================= */
#main-content{ padding:20px; }
.container{
  background: transparent; padding:0; margin:0 auto; width:100%; max-width:1200px;
}
h1,h2,h3{ color:#111827; margin:0 0 14px; }
h1{ font-size:28px; font-weight:700; }
h2{ font-size:20px; font-weight:700; }
h3{ font-size:16px; font-weight:600; }

.page-actions{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
button, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--primary); color:#fff; border:1px solid transparent;
  padding:10px 16px; border-radius:8px; font-weight:600; cursor:pointer;
  transition: background .2s ease, transform .05s ease;
  text-decoration:none;
}
button:hover, .btn:hover{ background: var(--primary-hover); }
button:active, .btn:active{ transform: translateY(1px); }
button.secondary, .btn.secondary{ background: var(--success); }
button.secondary:hover, .btn.secondary:hover{ background:#13823c; }
button.danger, .btn.danger{ background: var(--danger); }
button.danger:hover, .btn.danger:hover{ background:#b71c1c; }
button.linklike{ background:transparent; color:var(--primary); border:0; padding:0; }

/* =========================================================
   FORMS
   ========================================================= */
.form-group{ display:flex; flex-direction:column; margin-bottom:14px; }
.form-group label{ font-weight:600; color:#374151; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea{
  padding:10px 12px; border:1px solid var(--border-soft); border-radius:8px;
  background:#fff; font-size:14px; color:#111827;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(52,152,219,.2);
}
.form-actions{ text-align:center; margin-top:16px; }

/* =========================================================
   CARDS
   ========================================================= */
.dashboard-card{
  background: var(--bg-card); border:1px solid var(--border-soft);
  border-radius:12px; box-shadow: var(--shadow-1);
  overflow:hidden;
}
.dashboard-card-header{
  padding:14px 16px; font-weight:700; font-size:16px; color:#111827; border-bottom:1px solid var(--border-soft);
  background:#fff;
}
.dashboard-card-body{ padding:16px; }

/* =========================================================
   SMALL-BOX (AdminLTE tarzı özet kutular)
   ========================================================= */
.small-box{
  position:relative; display:block; color:#fff; border-radius:12px; overflow:hidden;
  box-shadow: var(--shadow-1);
}
.small-box > .inner{ padding:18px; }
.small-box h3{ font-size:2.2rem; margin:0 0 8px; font-weight:800; line-height:1; }
.small-box p{ margin:0; font-size:1.1rem; opacity:.95; }
.small-box .icon{
  position:absolute; right:14px; top:10px; font-size:60px; opacity:.22; line-height:1;
}
.small-box-footer{
  display:block; text-align:center; color:#fff; padding:10px 12px; background:rgba(0,0,0,.12);
  text-decoration:none; font-weight:600;
}
.small-box-footer:hover{ background:rgba(0,0,0,.22); }

/* Renk temaları */
.bg-blue{ background: linear-gradient(45deg, var(--blue-1), var(--blue-2)); }
.bg-green{ background: linear-gradient(45deg, var(--green-1), var(--green-2)); }
.bg-yellow{ background: linear-gradient(45deg, var(--yellow-1), var(--yellow-2)); }
.bg-red{ background: linear-gradient(45deg, var(--red-1), var(--red-2)); }
.bg-purple{ background: linear-gradient(45deg, var(--purple-1), var(--purple-2)); }
.bg-teal{ background: linear-gradient(45deg, var(--teal-1), var(--teal-2)); }

/* =========================================================
   INFO-BOX (alternatif küçük kutu)
   ========================================================= */
.info-box{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--border-soft);
  border-radius:12px; padding:16px; box-shadow: var(--shadow-1); color:#111827; text-decoration:none;
}
.info-box:hover{ box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.info-box-icon{
  width:56px; height:56px; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:28px; opacity:.95;
}
.info-box-content{ display:flex; flex-direction:column; }
.info-box-text{ font-weight:700; color:#374151; }
.info-box-number{ font-size:26px; font-weight:800; }

/* Örnek renkler */
.info-blue .info-box-icon{ background: var(--blue-2); }
.info-green .info-box-icon{ background: var(--green-2); }
.info-yellow .info-box-icon{ background: var(--yellow-2); }
.info-red .info-box-icon{ background: var(--red-2); }

/* =========================================================
   TABLOLAR
   ========================================================= */
.results-table{
  width:100%; border-collapse: collapse; font-size:14px; background:#fff; border-radius:10px; overflow:hidden;
  border:1px solid var(--border-soft);
}
.results-table thead{ background:#111827; color:#fff; }
.results-table th, .results-table td{
  padding:12px; border-bottom:1px solid var(--border-soft); text-align:left; vertical-align:middle;
}
.results-table tbody tr:nth-child(even){ background:#fafafa; }
.results-table tbody tr:hover{ background:#f3f4f6; }

/* Responsive tablo (mobil) */
@media (max-width: 768px){
  .results-table thead{ display:none; }
  .results-table tr{ display:block; margin-bottom:12px; border:1px solid var(--border-soft); border-radius:10px; overflow:hidden; }
  .results-table td{
    display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px dashed var(--border-soft);
  }
  .results-table td::before{
    content: attr(data-label); font-weight:700; color:#374151;
  }
  .results-table td:last-child{ border-bottom:0; }
}

/* =========================================================
   FİLTRE/INPUT ALANI
   ========================================================= */
.filter-container{ margin-bottom:14px; }
.filter-input{
  width:100%; max-width:420px; padding:10px 12px; border:1px solid var(--border-soft);
  border-radius:10px; background:#fff; font-size:14px;
}
.filter-input:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(52,152,219,.2); }

/* =========================================================
   GRAFİK (Canvas alanı)
   ========================================================= */
canvas{ display:block; width:100%; height:auto; }

/* =========================================================
   MESAJLAR
   ========================================================= */
.message{
  padding:12px 14px; border-radius:10px; font-weight:700; margin:10px 0; text-align:center;
}
.message.success{ background:#dcfce7; color:#065f46; border:1px solid #bbf7d0; }
.message.error{ background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; }

/* =========================================================
   YAZDIRMA
   ========================================================= */
@media print{
  @page{ size: A4 portrait; margin: 12mm; }
  body{ background:#fff; }
  .main-header, #sidebar, #overlay, .nav-btn, .small-box-footer, .page-actions{ display:none !important; }
  .content-wrapper{ margin:0 !important; }
  .dashboard-card{ page-break-inside: avoid; border:1px solid #ddd; box-shadow:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px){
  .content-wrapper.with-sidebar{ margin-left:0; }
}
@media (max-width: 480px){
  h1{ font-size:22px; }
  .small-box h3{ font-size:1.8rem; }
}
/* ======== Responsive Yamalar — Enertak ======== */

/* 1) Üst bar sabit: içeriğe güvenli üst boşluk verelim */
.content-wrapper {
  /* İçerik header altında başlasın */
  padding-top: 56px; /* header yüksekliği */
  /* iOS safe-area için: */
  padding-top: calc(56px + env(safe-area-inset-top));
}

/* 2) Sidebar davranışı:
   - >=1201px'te varsayılan açık dursun (boşluk kaybını önler)
   - Overlay masaüstünde görünmesin
*/
@media (min-width: 1201px){
  #sidebar { transform: translateX(0); }
  #overlay { display: none !important; }
  .content-wrapper.with-sidebar { margin-left: 250px; }
}

/* 3) Küçük ekranlarda içerik soldan boşluk yapmasın */
@media (max-width: 1200px){
  .content-wrapper.with-sidebar { margin-left: 0; }
}

/* 4) Yardımcı sınıf düzeltmesi: !important yazım hatası */
.mb-1{ margin-bottom:8px !important; }

/* 5) .results-table için alternatif mobil davranış:
   Eğer td'lerde data-label yoksa thead'i gizlemek yerine yatay kaydırma kullanalım.
   (Var olan stacked stile ek olarak güvenli bir scroll kapsayıcı.)
*/
.table-wrap { overflow-x: auto; }
.table-wrap .results-table { min-width: 680px; } /* kırılmadan kaydırılsın */

/* 6) Küçük ekran iyileştirmeleri */
@media (max-width: 480px){
  h1{ font-size:22px; }
  .small-box h3{ font-size:1.8rem; }
  /* buton ve form konforu */
  button, .btn { padding: 10px 12px; }
  .form-group input, .form-group select, .form-group textarea { font-size: 15px; }
}

/* 7) Az hareket isteyen kullanıcılar için */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* 8) Canvas ve grafik kartları dar ekranlarda taşmasın */
canvas { max-width: 100%; height: auto !important; }

/* 9) Dropdown menünün küçük ekranlarda üst barın altında kalması */
.dropdown-menu { z-index: 1031; }