/* ==========================================================================
   Kerem Aşevi — Kurumsal UI (v3 • iyileştirilmiş + mobil tablo/kart + buton kontrast)
   ========================================================================== */

/* Design Tokens */
:root{
  --bg: #f6f8fb;
  --fg: #0f172a;
  --muted: #6b7280;

  --brand: #0a7c5b;
  --brand-600: #0c6f52;
  --brand-700: #0a5c44;

  --surface: #ffffff;
  --surface-2: #f1f5f9;

  --accent: #0ea5e9;
  --accent-600: #0284c7;

  --success-bg:#eafff1; --success-bd:#b9eac9; --success-fg:#064d2a;
  --error-bg:#ffeaea;   --error-bd:#f2c2c2;   --error-fg:#7a001c;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --shadow-sm: 0 6px 16px rgba(2,6,23,.06);
  --shadow-md: 0 12px 30px rgba(2,6,23,.08);
  --shadow-lg: 0 20px 48px rgba(2,6,23,.12);

  --transition: .18s ease;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --fg: #e5e7eb;
    --muted: #9aa4b2;

    --surface: #0f172a;
    --surface-2: #111827;

    --success-bg:#0b2b1c; --success-bd:#1f5c3d; --success-fg:#c0f3d5;
    --error-bg:#2a0f13;   --error-bd:#6a2a2e;   --error-fg:#f8c7ce;

    --shadow-sm: 0 0 0 rgba(0,0,0,0);
    --shadow-md: 0 0 0 rgba(0,0,0,0);
    --shadow-lg: 0 0 0 rgba(0,0,0,0);
  }
}

/* Base */
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 18px}
a{color:inherit;text-decoration:none}
p{line-height:1.6}

/* Focus (erişilebilirlik) */
:focus{outline:none}
:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Topbar (nav.php ile uyumlu) */
.topbar{
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow: var(--shadow-sm);
}
.topbar .nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  color:#eafff2; font-weight:800; letter-spacing:.2px;
}
.brand:hover{opacity:.9}

/* Hamburger */
.hamburger{
  display:inline-flex; flex-direction:column; gap:4px;
  background:transparent; border:0; cursor:pointer; padding:6px;
}
.hamburger span{
  display:block; width:24px; height:2px; background:#eafff2; border-radius:2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Menü */
.menu{
  position:fixed; inset:64px 0 auto 0;
  background: var(--brand-700);
  transform: translateY(-120%);
  transition: transform var(--transition);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}
.menu.open{ transform: translateY(0) }
.menu ul{list-style:none;margin:0;padding:10px}
.menu a{
  display:block; padding:12px 12px; color:#eafff2; border-radius:10px;
  transition: background var(--transition), transform var(--transition);
}
.menu a:hover, .menu a.active{ background: rgba(255,255,255,.14) }
.menu .sep{border-top:1px solid rgba(255,255,255,.22); margin:8px 0}
.menu .user{padding:10px 12px 6px; color:#d2ffe2; opacity:.95}

/* Desktop menü */
@media (min-width: 980px){
  .hamburger{display:none}
  .menu{position:static; transform:none; background:transparent; box-shadow:none}
  .menu ul{display:flex; align-items:center; gap:8px; padding:0}
  .menu a{padding:8px 12px; color:#fff}
  .menu .sep{display:none}
  .menu .user{color:#d2ffe2; padding:0 6px}
}

/* Sayfa iskeleti */
.main{padding:28px 0 36px}

/* Başlıklar */
.section-title{
  margin:0 0 12px 0;
  font-size:1.25rem;
  letter-spacing:.2px;
  font-weight:800;
}

/* Kartlar */
.card{
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding:18px;
}
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
  margin-top:18px;
}
.card-link{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding:18px 16px;
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; gap:12px; justify-content:center;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  text-align:center;
}
.card-link:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: #ffffff;
}

/* Kart içi icon (emoji de olur) */
.icon{
  width:28px; height:28px; flex:0 0 28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: linear-gradient(180deg, var(--accent), var(--accent-600));
  color:#fff; font-weight:700;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

/* Bildirim kutuları */
.success{
  background: var(--success-bg);
  border:1px solid var(--success-bd);
  color: var(--success-fg);
  padding:10px 12px; border-radius: var(--radius-sm);
}
.error{
  background: var(--error-bg);
  border:1px solid var(--error-bd);
  color: var(--error-fg);
  padding:10px 12px; border-radius: var(--radius-sm);
}
.muted{color:var(--muted)}

/* Formlar */
label{display:block; font-size:.94rem; margin-bottom:8px}
input, select, textarea{
  width:100%; padding:10px 12px;
  border:1px solid #d6dbe0; border-radius:12px;
  background: var(--surface);
  color: var(--fg);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--accent);
  border-color:transparent;
}

/* Butonlar (yüksek kontrast) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--brand);
  color:#fff; padding:10px 16px; border-radius:12px;
  border:0; cursor:pointer; font-weight:700;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), filter .12s ease;
}
.btn:hover{ background: var(--brand-600); transform: translateY(-1px); box-shadow: var(--shadow-md) }
.btn:active{ transform: translateY(0) }
.btn.gray{ background:#6b7280; color:#fff }
.btn.outline{ background:#fff; color:var(--brand); border:1px solid var(--brand) }
.btn.danger{ background:#b91c1c; color:#fff }
.btn.warn{ background:#f59e0b; color:#111 }
.btn.sm{ padding:6px 10px; border-radius:10px; font-weight:700 }

/* Tablolar (masaüstü görünüm + şeritli efekt) */
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); text-align:left; padding:0 10px 6px
}
.table tr{
  transition: box-shadow .12s ease, transform .06s ease;
}
.table tr:hover td{ box-shadow: var(--shadow-sm) }
.table td{
  background: var(--surface);
  padding:14px 10px; border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7;
}
.table tr td:first-child{border-left:1px solid #eef2f7; border-top-left-radius:12px; border-bottom-left-radius:12px}
.table tr td:last-child{border-right:1px solid #eef2f7; border-top-right-radius:12px; border-bottom-right-radius:12px}

/* Mobil tablo → kart görünümü (data-label ile başlık göster) */
@media (max-width: 640px){
  .table{ border-spacing:0; }
  .table thead{ display:none }
  .table tbody{ display:block }
  .table tr{
    display:block; margin:10px 0; border-radius:12px;
  }
  .table td{
    display:flex; justify-content:space-between; align-items:center;
    gap:12px; padding:12px 14px; border:1px solid #eef2f7; border-bottom:none;
  }
  .table tr td:first-child{ border-top-left-radius:12px; border-top-right-radius:12px }
  .table tr td:last-child{
    border-bottom:1px solid #eef2f7;
    border-bottom-left-radius:12px; border-bottom-right-radius:12px
  }
  .table td[data-label]::before{
    content: attr(data-label);
    font-weight:700; color:var(--muted); margin-right:12px;
  }
}

/* ---------- Yardımcılar ---------- */

/* Giriş sayfaları için ortalama */
.page-center{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #eaf3ef 0%, #ffffff 100%);
}

/* Üst barda sağdaki kullanıcı kutusu (eski sayfalarla uyum) */
.userbox{
  color:#eafff2; font-size:.95rem;
}
.userbox a{ color:#fff; text-decoration: underline; text-underline-offset: 2px; }

/* Menü açılış animasyonu (app.js v3 ile uyumlu) */
.menu.animating{ animation: menuFadeSlide .25s ease; }
@keyframes menuFadeSlide{
  from{ opacity:0; transform: translateY(-10px); }
  to  { opacity:1; transform: translateY(0); }
}

/* Scroll kilidi (mobilde menü açıkken arka plan sabit) */
html.no-scroll, body.no-scroll{ overflow: hidden; }

/* Durum rozetleri */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  border:1px solid #e2e8f0; font-size:12px; color:#1f2937; background:#f8fafc;
}
.badge.green{ background:#ecfdf5; border-color:#bbf7d0; color:#14532d }
.badge.gray{ background:#f1f5f9 }

/* Bölüm alt notu */
.hint{ font-size:.92rem; color:var(--muted) }

/* Hareket azalt */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}
/* TABLO GÖRÜNÜMÜ — sadece kurs listesi için */
.table-wrap{overflow-x:auto;max-width:100%}
table.data-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  font-size:14px;
}
table.data-table th,
table.data-table td{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:top;
}
table.data-table th{
  background:#f1f5f9;
  font-weight:600;
  white-space:nowrap;
}
table.data-table tr:hover td{
  background:#f9fafb;
}

/* mobilde yatay kaydırma */
@media (max-width:768px){
  table.data-table th, table.data-table td{
    padding:8px;
    font-size:13px;
  }
}
table.data-table td { word-break: break-word; }
/* ==== MOBİL MENÜ KATMAN & GÖRÜNÜRLÜK KONTROLLERİ ==== */
/* Menü, topbar (z-index:50) ve içerik üzerinde dursun */
.menu{ z-index:60; }

/* Bu sayfadaki mobil varyantı sadece mobilde göster */
@media (min-width:980px){
  .menu.menu--mobile{ display:none !important; }
}
@media (max-width:979px){
  .menu.menu--mobile{ display:block; }
}

/* (Opsiyonel ama faydalı) Kapalıyken tıklamaları engelle, açılınca aktif et */
.menu{ pointer-events:none; }
.menu.open{ pointer-events:auto; }