/* ========= Base Tema ========= */
:root{
  /* Ana renkler */
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#4b5563;
  --border:#e5e7eb;
  --accent:#2563eb;

  /* Aliaslar */
  --text-primary:var(--text);
  --text-secondary:var(--muted);
  --border-color:var(--border);
  --accent-color:var(--accent);
  --accent-hover:#1d4ed8;
  --card-bg:var(--card);

  /* Form/odak için yardımcılar */
  --ring: #2563eb;
  --ring-shadow: 0 0 0 3px rgba(37,99,235,.20);
  --danger: #ef4444;
  --danger-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

/* Genel yardımcılar */
*{box-sizing:border-box}
html,body{height:100%}
/* 0) Sayfanın yatay kaymasını tamamen kapat */
html, body { overflow-x: hidden; }
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent-color);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent-hover)}

/* Marka/menü (public) */
.brand .logo{background:linear-gradient(135deg,#60a5fa,#2563eb)}
nav a.active{background:#f3f4f6}
.card{background:var(--card);border-color:var(--border)}

/* ========= Public (haber sayfası) ========= */
.container{
  max-width:1120px;
  margin:0 auto;       /* ortalama */
  padding:0 16px;      /* kenarlardan boşluk */
}

.site-header{padding:1.25rem 0;border-bottom:1px solid var(--border-color)}
.header-content{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-logo{width:32px;height:32px;border-radius:8px;display:block;object-fit:contain;flex-shrink:0}
.brand-name{font-size:1.125rem;font-weight:600;color:var(--text-primary)}
.main-nav{display:flex;gap:.5rem}
.main-nav a{padding:.5rem 1rem;border-radius:8px;font-weight:500;color:var(--text-secondary);transition:background-color .2s,color .2s}
.main-nav a:hover{background:var(--card-bg);color:var(--text-primary)}

.main-content{padding:2.5rem 0}
.article-container{max-width:800px;margin:0 auto}
.article-cover{width:100%;height:auto;max-height:400px;object-fit:cover;border-radius:12px;margin-bottom:2rem}
.article-title{font-size:2.5rem;font-weight:700;line-height:1.2;margin:0 0 1rem}
.article-meta{color:var(--text-secondary);margin-bottom:2rem}
.article-content{font-size:1.125rem;line-height:1.7;color:var(--text)}
.article-content h2,.article-content h3{font-weight:600;color:var(--text);margin-top:2.5rem}
.article-content p{margin:0 0 1.5rem}
.article-content a{text-decoration:underline}
.article-content img{max-width:100%;height:auto;border-radius:8px}
.site-footer{margin-top:2rem;padding:2.5rem 0;border-top:1px solid var(--border-color)}
.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-links{display:flex;gap:1.5rem}
.footer-links a,.copyright{color:var(--text-secondary);font-size:.875rem}
@media (max-width:768px){
  .container{ padding:0 12px; }
  .main-content{ padding:20px 0; }
  .article-container{ padding:0px 10px; }
}


/* ========= Admin Ortak Bileşenler ========= */
.wrap{max-width:1100px;margin:2rem auto;padding:1rem}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.top h1{font-size:1.5rem;margin:0;color:var(--text)}
.top-actions{display:flex;gap:.75rem}

/* Buttons */
.btn{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:10px;
  padding:8px 14px;
  color:var(--text);
  font-weight:500;
  transition:background .2s, border-color .2s, box-shadow .2s, transform .05s;
  cursor:pointer;
}
.btn:hover{background:#f3f4f6;border-color:#cbd5e1}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#2563eb}
.btn-danger{color:#dc2626;border-color:#fecaca;background:#fff}
.btn-danger:hover{background:#fee2e2}

/* Table */
.table-container{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
thead{background:#f3f4f6}
th{font-weight:600;color:var(--text)}
tbody tr:last-child td{border-bottom:0}
td a{color:var(--accent);font-weight:500}
td a:hover{text-decoration:underline}

/* Badges & notifications */
.status-badge{font-size:12px;padding:3px 8px;border-radius:12px;font-weight:500}
.status-publish{background:rgba(16,185,129,.1);color:#059669;border:1px solid #059669}
.status-draft{background:rgba(166,176,182,.1);color:var(--muted);border:1px solid var(--border)}
.notification{padding:1rem;margin-bottom:1rem;border-radius:8px;border:1px solid}
.notification-success{background:rgba(16,185,129,.1);color:#059669;border-color:#059669}
.notification-danger{background:rgba(239,68,68,.1);color:#dc2626;border-color:#dc2626}

/* Forms (admin) */
.form-container{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:2rem}
label{display:block;margin-bottom:6px;font-weight:500;color:var(--text-secondary)}

input[type=text],textarea,select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
  font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}
input[type=text]::placeholder,textarea::placeholder{color:var(--text-secondary);opacity:.6}
input[type=text]:hover,textarea:hover,select:hover{border-color:#4b5563}
input[type=text]:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--ring);box-shadow:var(--ring-shadow);background:#fff
}
input[type=text]:disabled,textarea:disabled,select:disabled{opacity:.7;cursor:not-allowed;background:#f3f4f6}
input[type=text][readonly],textarea[readonly]{background:#f9fafb;color:var(--text)}
input[type=text]:invalid,textarea:invalid,select:invalid{border-color:var(--danger);box-shadow:var(--danger-shadow)}

select{
  appearance:none;-moz-appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg' fill='%23111827'%3E%3Cpath d='M4 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px;padding-right:36px
}
.input-sm{padding:8px 10px;font-size:13px;border-radius:8px}
.input-lg{padding:12px 14px;font-size:15px;border-radius:12px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
.form-group{margin-bottom:1.5rem}
.form-actions{margin-top:2rem;display:flex;gap:1rem;align-items:center}

/* Toolbar & Editor (admin) */
.toolbar{display:flex;flex-wrap:wrap;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px;margin:8px 0}
.tool{border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);padding:6px 8px;cursor:pointer}
#editor{min-height:350px;background:var(--card);border:1px dashed var(--border);border-radius:12px;padding:14px;line-height:1.6}

/* ========= Login min (opsiyonel, sade) ========= */
body.login{display:flex;align-items:flex-start;justify-content:center;padding-top:100px}



/* ============ Makale Detay “anti-overflow” paketi ============ */
html, body{ overflow-x:hidden; }

.article-content,
.article-content p,
.article-content li,
.article-content h1, .article-content h2, .article-content h3{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.article-content img,
.article-cover,
.article-content iframe,
.article-content video{
  max-width:100%;
  height:auto;
  display:block;
}

/* 0) Sayfanın yatay kaymasını KAPAT */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* --- NAV OVERFLOW FIX (wrap) --- */
@media (max-width: 768px){
  .header-content{
    flex-wrap: wrap !important;          /* logo + menü alt alta da olabilir */
    gap: .5rem !important;
  }
  .main-nav{
    display: flex !important;
    flex-wrap: wrap !important;          /* TAŞMAYI BİTİRİR */
    justify-content: center !important;
    width: 100% !important;
    gap: .25rem !important;
    overflow: hidden !important;         /* body yerine nav kessin */
  }
  .main-nav a{
    padding: .5rem .75rem !important;    /* butonlar biraz daralsın */
    white-space: nowrap !important;      /* tek kelime */
  }
}