/* === MENU === */
nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

nav li {
    display: inline-block;
    position: relative;
    margin-right: 12px;
}

nav li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px;
}

nav li:hover ul {
    display: block;
}

nav li ul li {
    display: block;
    margin: 6px 0;
}

.brand-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.brand-link:hover .brand-title {
    opacity: 0.85;
}

.slider{
  width: 100%;
  max-width: 1100px;
  margin: 20px auto;
  height: 320px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
}

.slides{
  height: 100%;
  display: flex;
  transition: transform 0.5s ease;
}

.slide{
  min-width: 100%;
  position: relative;
  height: 100%;
}

.slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.05));
  z-index: 1;
}

.slide-content{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: #fff;
  max-width: 700px;
  z-index: 2;
}

.slide-content h2{
  margin: 0;
  font-size: 28px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.slide-content p{
  margin: 0;
  opacity: 0.95;
  line-height: 1.5;
}

.slide-cta{
  display: inline-block;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.92);
  color: #111;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
}

.slider-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  font-size: 22px;
  cursor: pointer;
}

.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }

/* =========================
   NEWS (Home)
========================= */

.card{
  background:#fff;
  border:1px solid #ddd;
  padding:14px;
}

/* Featured haber alt çizgi */
.news-feature{
  padding-bottom:14px;
  border-bottom:1px solid #e6e6e6;
  margin-bottom:14px;
}

/* 2x2 grid ayraçları */
.news-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0; /* çizgi net dursun */
}

.news-item{
  padding:12px 14px;
}

/* satır çizgisi (3. ve 4. item) */
.news-item:nth-child(n+3){
  border-top:1px solid #e6e6e6;
}

/* kolon çizgisi (sağ kolon) */
.news-item:nth-child(2n){
  border-left:1px solid #e6e6e6;
}

/* mobilde tek kolon olunca sol çizgi kalksın */
@media (max-width: 700px){
  .news-grid{ grid-template-columns:1fr; }
  .news-item:nth-child(2n){ border-left:none; }
}

/* === LAYOUT === */
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:#f6f6f6; color:#111; }
.container { width: min(1100px, 92%); margin: 0 auto; }
.topbar { background:#fff; border-bottom:1px solid #e6e6e6; }
.topbar-inner {
    padding: 20px 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.brand { display:flex; gap:14px; align-items: baseline; }
.brand-title { font-size: 44px; font-weight: 800; letter-spacing: -1px; }
.brand-sub { color:#666; }

.main-nav {
    background:#fff;
    border-bottom:1px solid #e6e6e6;
    border-top: 1px solid #eee;
}
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 24px;
    padding: 12px 0;
    margin: 0;
}
/* LI konum referansı olsun */
.main-nav li {
    position: relative;
}

/* Sub menu (ilk başta gizli) */
.main-nav li ul {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-radius: 6px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    min-width: 160px;
    padding: 8px 0;
    z-index: 1000;
}

/* Sub menu içindeki elemanlar */
.main-nav li ul li {
    padding: 0;
}

/* Sub menu linkleri */
.main-nav li ul a {
    display: block;
    padding: 8px 14px;
    color: #222;
    white-space: nowrap;
}

/* Hover ile aç */
.main-nav li:hover > ul {
    display: block;
}

/* Hover efekti */
.main-nav li ul a:hover {
    background: #f5f5f5;
}
.main-nav a {
    text-decoration: none;
    color: #222;
    font-weight: 500;
    padding: 6px 2px;
    position: relative;
}

.main-nav a:hover {
    color: #000;
}

/* hover underline efekti */
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #000;
    transition: width 0.2s ease;
}

.main-nav a:hover::after {
    width: 100%;
}
.main-nav .container {
    padding: 0 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.page { padding: 22px 0; }
.layout { display:grid; grid-template-columns: 1fr 300px; gap: 22px; align-items:start; }
@media (max-width: 900px){ .layout { grid-template-columns: 1fr; } }

.card { background:#fff; border:1px solid #e6e6e6; border-radius: 10px; padding: 16px; }
.section-title { font-weight: 800; font-size: 16px; margin-bottom: 12px; }

.divider { height:1px; background:#e9e9e9; margin: 14px 0; }

/* === Breaking / Featured === */
.featured { display:grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
@media (max-width: 700px){ .featured { grid-template-columns: 1fr; } }

.featured-img img{
  width:100%;
  height:240px;          /* sabit yükseklik */
  object-fit:cover;      /* kırpıp sığdırır */
  border-radius:10px;
}
.featured-title { margin:0 0 8px; font-size: 34px; line-height: 1.05; }
.featured-title a { color:#111; text-decoration:none; }
.featured-excerpt { margin:0; color:#333; line-height: 1.6; }

.news-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px){ .news-grid { grid-template-columns: 1fr; } }

.news-item { display:grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #eee; }
.news-item:first-child { border-top:none; }

.news-thumb img{
  width:110px;
  height:72px;
  object-fit:cover;
  border-radius:8px;
}
.news-text h3 { margin:0 0 6px; font-size: 18px; }
.news-text h3 a { color:#111; text-decoration:none; }
.news-text p { margin:0; color:#444; }

.all-news { display:inline-block; margin-top: 6px; color:#0b62d6; text-decoration:none; font-weight:700; }

/* === News list page === */
.news-row { display:grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 12px 0; }
@media (max-width: 700px){ .news-row { grid-template-columns: 1fr; } }
.news-row-thumb img{
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:10px;
}
.news-row-text h3 { margin:0 0 6px; }
.news-row-text p { margin:0; color:#444; line-height: 1.6; }

/* === Content page === */
.content-title { margin:0 0 12px; font-size: 34px; }
.content-img{
  width:100%;
  max-height:360px;
  object-fit:cover;
  border-radius:10px;
}
.content-body { line-height: 1.8; color:#222; }

/* === Sidebar Ad === */
.ad-img { width:100%; height:auto; border-radius: 10px; display:block; }
.ad-empty { padding: 14px; border:1px dashed #ddd; border-radius: 10px; color:#555; background:#fafafa; }

/* === Form === */
.form { display:grid; gap: 10px; }
.form input, .form textarea { width:100%; padding: 10px; border:1px solid #ddd; border-radius: 10px; }
.form textarea { min-height: 120px; resize: vertical; }
.form button { padding: 10px 14px; border:none; background:#111; color:#fff; border-radius: 10px; cursor:pointer; }

/* === Footer === */
.footer { margin-top: 24px; padding: 18px 0; border-top:1px solid #e6e6e6; background:#fff; color:#666; }

img { max-width: 100%; height: auto; display: block; }

/* =========================
   ADMIN PANEL (scoped)
   ========================= */
body.admin{
  background:#f5f5f8;
  color:#1b1b1f;
}

/* üst bar */
.admin-topbar{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(245,245,248,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e6e6ee;
}

.admin-topbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.admin-brand{
  display:flex;
  flex-direction:column;
  gap: 2px;
}

.admin-brand-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.admin-brand-sub{
  font-size: 12px;
  color:#6b6b78;
}

/* tab butonlar */
.admin-tabs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.admin-tab{
  display:inline-flex;
  align-items:center;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
  color:#3a3a48;
  background: #ffffff;
  border: 1px solid #e7e7ef;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.admin-tab:hover{
  border-color:#d7d7e6;
  transform: translateY(-1px);
}

.admin-tab.is-active{
  color:#3b1b8c;
  border-color:#cdbdff;
  background: linear-gradient(180deg, #ffffff 0%, #f6f2ff 100%);
}

.admin-tab.is-logout{
  color:#6a1b5d;
  border-color:#f0d7ee;
}

/* sayfa gövde */
.admin-shell{ width: 100%; }
.admin-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px 30px;
}

.admin-card{
  background:#fff;
  border: 1px solid #e7e7ef;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(30, 20, 60, 0.08);
}

.admin-card-inner{
  padding: 18px;
}

/* admin iç başlıklar */
body.admin h3{
  margin: 6px 0 12px;
  font-size: 18px;
}
body.admin h4{
  margin: 10px 0 10px;
  font-size: 14px;
  color:#2a2a33;
}

/* formlar: sen inline style kullansan bile genel görünüm toparlar */
body.admin input,
body.admin select,
body.admin textarea{
  border: 1px solid #e2e2ee;
  border-radius: 10px;
  padding: 9px 10px;
  outline: none;
}
body.admin input:focus,
body.admin select:focus,
body.admin textarea:focus{
  border-color: #cdbdff;
  box-shadow: 0 0 0 4px rgba(121, 82, 255, 0.12);
}

/* butonlar */
body.admin button{
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  box-shadow: 0 10px 24px rgba(109,40,217,0.22);
}
body.admin button:hover{ transform: translateY(-1px); }

/* tabloları modernleştir (border attribute olsa da iyi görünür) */
body.admin table{
  width:100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #e7e7ef;
  background:#fff;
}
body.admin th{
  text-align:left;
  font-size: 12px;
  letter-spacing: 0.2px;
  color:#5a5a66;
  background:#f7f7fb;
  padding: 12px 10px;
  border-bottom: 1px solid #ececf6;
}
body.admin td{
  padding: 12px 10px;
  border-bottom: 1px solid #000000;
}
body.admin tr:hover td{
  background:#fafafe;
}

/* action linkleri küçük rozet gibi */
body.admin td a{
  text-decoration:none;
  font-weight: 700;
  color:#5b21b6;
}
body.admin td a:hover{ text-decoration: underline; }

/* ===== MOVE ICONS ===== */
body.admin td{
  position: relative;
}

/* ok linkleri varsa */
body.admin td a:has(> span),
body.admin td a{
  text-decoration: none;
}

/* yukarı / aşağı oklar */
body.admin td a[href*="move"],
body.admin td a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px; /* 🔥 modern köşe */
  border: 1px solid #e6e6ef;
  background: #fff;
  color: #6b6b78;
  font-size: 14px;
  font-weight: 900;
  margin-right: 6px;
  transition: all .15s ease;
}

/* hover efekti */
body.admin td a:hover{
  background: #f3f0ff;
  border-color: #cdbdff;
  color: #5b21b6;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(109,40,217,0.18);
}

/* sadece ok içeren linkler için */
body.admin td a:contains("↑"),
body.admin td a:contains("↓"){
  font-size: 15px;
}

body.admin td a::before{
  display:block;
}

body.admin td a:contains("↑")::before{
  content:"▲";
}

body.admin td a:contains("↓")::before{
  content:"▼";
}

/* ===== ACTION BUTTONS (Toggle / Edit / Delete) ===== */
body.admin td a[href*="action=toggle"],
body.admin td a[href*="action=edit"],
body.admin td a[href*="action=delete"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  min-width: 50px;
  height: 22px;
  border-radius: 9px;          /* az yuvarlak, modern */
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  text-decoration: none !important;
  border: 1px solid #e7e7ef;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.04);
  margin-right: 8px;
  transition: .15s ease;
}

/* hover */
body.admin td a[href*="action=toggle"]:hover,
body.admin td a[href*="action=edit"]:hover,
body.admin td a[href*="action=delete"]:hover{
  transform: translateY(-1px);
}

/* Toggle (mor) */
body.admin td a[href*="action=toggle"]{
  color: #5b21b6;
  background: #f5f0ff;
  border-color: #d9ccff;
}
body.admin td a[href*="action=toggle"]::before{
  content: "⟲";
  font-size: 12px;
}

/* Edit (mavi-mor arası) */
body.admin td a[href*="action=edit"]{
  color: #3b3a7a;
  background: #eef2ff;
  border-color: #cfd7ff;
}
body.admin td a[href*="action=edit"]::before{
  content: "✎";
  font-size: 12px;
}

/* Delete (kırmızı) */
body.admin td a[href*="action=delete"]{
  color: #8a1f2b;
  background: #fff1f2;
  border-color: #ffd0d6;
}
body.admin td a[href*="action=delete"]::before{
  content: "🗑";
  font-size: 12px;
}

/* Aradaki | ayraçlarını “daha silik” göstermek istersen:
   (HTML'de pipe karakteri olduğu için tamamen CSS'le kaldırmak riskli,
   ama silikleştirme güvenli) */
body.admin td{
  color: rgb(0, 0, 0);
}
body.admin td a{
  color: inherit; /* linkler kendi renklerini yukarıda zaten alıyor */
}

/* CONTACT FORM */
.contact-card {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: #555;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #6a5acd;
}

.btn-primary {
    background: #6a5acd;
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-primary:hover {
    background: #5a4bcf;
}

.alert {
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
}

.alert.success {
    background: #e7f7ee;
    color: #2f7a4f;
}

.alert.error {
    background: #fdecea;
    color: #b3261e;
}

/* MESSAGE TABLE STATES */
.msg-row.is-read {
    background: #f3f4f6;
    opacity: 0.85;
}

.msg-row.is-unread {
    background: #fff;
}

/* READ BUTTON */
.btn-read-msg {
    border: 1px solid #ddd;
    background: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

.btn-read-msg.is-unread {
    border-color: #6a5acd;
    color: #6a5acd;
}

.btn-read-msg:hover {
    background: #f7f7ff;
}

/* MODAL */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-backdrop.is-open {
    display: flex;
}

.modal-card {
    width: min(720px, 92vw);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    overflow: hidden;
}

.modal-header {
    padding: 16px 18px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 18px;
    font-weight: 800;
}

.modal-close {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
}

.modal-body {
    padding: 16px 18px;
}

.modal-meta {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.modal-meta b {
    color: #222;
}

.modal-message {
    padding: 12px 14px;
    background: #f7f7f7;
    border-radius: 12px;
    white-space: pre-wrap;
    line-height: 1.45;
}

/* READ row muted */
.msg-row.is-read td { opacity: .75; background:#f3f4f6; }

/* Button base */
.btn-read-msg{
  padding:10px 14px; border-radius:12px; border:1px solid #ddd;
  font-weight:700; cursor:pointer;
}

/* Unread: purple */
.btn-read-msg.is-unread{
  background:#6a5acd; color:#fff; border-color:#6a5acd;
}

/* Read: gray */
.btn-read-msg.is-read{
  background:#e5e7eb; color:#374151; border-color:#d1d5db;
}
.btn-read-msg.is-read:hover{ background:#dfe3ea; }

/* Modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:9999; }
.modal-backdrop.is-open{ display:flex; }
.modal-card{ width:min(720px,92vw); background:#fff; border-radius:16px; overflow:hidden; }
.modal-header{ padding:16px 18px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.modal-title{ font-size:18px; font-weight:800; }
.modal-close{ border:1px solid #ddd; background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; }
.modal-body{ padding:16px 18px; }
.modal-meta{ font-size:14px; color:#555; margin-bottom:10px; }
.modal-message{ padding:12px 14px; background:#f7f7f7; border-radius:12px; white-space:pre-wrap; }

/* Login */

/* Login */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, .10);
  --purple: #6d28d9;
  --purple-2: #7c3aed;
  --danger-bg: rgba(239, 68, 68, .10);
  --danger: #ef4444;
  --radius: 18px;
  --shadow: 0 16px 40px rgba(15,23,42,.08);
}

body.auth{
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(900px 300px at 50% 0%, rgba(124,58,237,.14), transparent 60%), var(--bg);
  padding: 64px 16px;
}

.auth{
  width: 100%;
  display:flex;
  justify-content:center;
}

.auth-card{
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.auth-head{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 14px;
}

.brand-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--purple-2), var(--purple));
  box-shadow: 0 0 0 6px rgba(124,58,237,.12);
}

.auth-head h1{
  font-size: 20px;
  margin: 0;
  letter-spacing: .2px;
}

.auth-head p{
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.auth-alert{
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, .20);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  margin: 10px 0 14px;
}

.auth-form{ display:flex; flex-direction:column; gap: 12px; }

.field span{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px 2px;
}

.field input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fbfbfe;
  outline: none;
  transition: 120ms ease;
}

.field input:focus{
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 0 0 4px rgba(124,58,237,.12);
  background: #fff;
}

.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 2px;
}

.check{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  user-select:none;
}

.check input{ accent-color: var(--purple); }

.link{
  font-size: 13px;
  color: var(--purple);
  text-decoration: none;
  border-bottom: 1px dashed rgba(124,58,237,.35);
}
.link:hover{ border-bottom-style: solid; }

.btn-primary{
  margin-top: 4px;
  border: 0;
  cursor:pointer;
  padding: 12px 14px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(180deg, var(--purple-2), var(--purple));
  box-shadow: 0 10px 24px rgba(109,40,217,.22);
  transition: transform 120ms ease, filter 120ms ease;
}
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn-primary:active{ transform: translateY(0px); }

.auth-foot{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  text-align:center;
  border-top: 1px solid rgba(15,23,42,.08);
  padding-top: 10px;
}

/* 1) Tüm elemanlarda hesap doğru olsun */
*, *::before, *::after{
  box-sizing: border-box;
}

/* 2) Inputlar taşmasın */
.auth-card input{
  width: 100%;
  max-width: 100%;
  display: block;
}

/* 3) Eğer form row/flex kullanıyorsan daralmaya izin ver */
.auth-form, .field{
  width: 100%;
  min-width: 0;
}