/* KATALOG API v2 — PANEL BILESEN KITAPLIGI
   Palette: light default, .karanlik ile dark. Spacing: 4/8/12/16/20/24/32.
*/

/* ── Tokenler ── */
:root{
  /* Renkler (light) */
  --bg:        #f6f7fb;
  --yuzey:     #ffffff;
  --yuzey-2:   #f8fafc;
  --cizgi:     #e5e9f0;
  --cizgi-2:   #eef2f6;
  --metin:     #0f172a;
  --metin-2:   #475569;
  --metin-3:   #94a3b8;
  --link:      #4f46e5;
  --link-h:    #4338ca;
  --iyi:       #10b981;
  --iyi-bg:    #d1fae5;
  --uyari:     #f59e0b;
  --uyari-bg:  #fef3c7;
  --kotu:      #ef4444;
  --kotu-bg:   #fee2e2;
  --bilgi:     #0284c7;
  --bilgi-bg:  #dbeafe;
  --golge:     0 1px 2px rgba(15,23,42,.05);
  --golge-2:   0 6px 18px -6px rgba(15,23,42,.15);
  --golge-3:   0 24px 48px -20px rgba(15,23,42,.35);

  /* Sidebar (light — biraz koyu ama karanlik degil) */
  --yan-bg:    #0f172a;
  --yan-metin: #cbd5e1;
  --yan-metin-2: #94a3b8;
  --yan-bl:    #64748b;
  --yan-hov:   #1e293b;
  --yan-akt:   #4f46e5;
  --yan-akt-bg:#4f46e5;
  --yan-cizgi: #1e293b;

  --yan-w: 248px;
  --ust-h: 64px;
  --r: 10px;
  --r-2: 12px;
}
:root.karanlik{
  --bg:        #0b1220;
  --yuzey:     #131c2e;
  --yuzey-2:   #0f1626;
  --cizgi:     #1e293b;
  --cizgi-2:   #253247;
  --metin:     #e2e8f0;
  --metin-2:   #94a3b8;
  --metin-3:   #64748b;
  --link:      #818cf8;
  --link-h:    #a5b4fc;
  --iyi:       #34d399;
  --iyi-bg:    #064e3b;
  --uyari:     #fbbf24;
  --uyari-bg:  #78350f;
  --kotu:      #f87171;
  --kotu-bg:   #7f1d1d;
  --bilgi:     #38bdf8;
  --bilgi-bg:  #0c4a6e;
  --golge:     0 1px 2px rgba(0,0,0,.4);
  --golge-2:   0 6px 18px -6px rgba(0,0,0,.6);
  --golge-3:   0 24px 48px -20px rgba(0,0,0,.7);
  --yan-bg:    #060b17;
}

/* ── Sifirlama ── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--metin);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
input,select,textarea{ font:inherit; }

/* ── Kabuk ── */
.kabuk{ display:flex; min-height:100vh; }

/* ── Sidebar ── */
.yan{
  width: var(--yan-w);
  background: var(--yan-bg);
  color: var(--yan-metin);
  position: fixed;
  inset: 0 auto 0 0;
  display:flex;
  flex-direction:column;
  border-right: 1px solid var(--yan-cizgi);
  transition: transform .2s;
  z-index: 40;
}
.marka{
  padding: 20px 20px;
  display:flex; align-items:center; gap:12px;
  border-bottom: 1px solid var(--yan-cizgi);
}
.marka .lg{
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:16px;
}
.marka b{ color:#f8fafc; font-size:15px; letter-spacing:.2px; display:block; }
.marka span{ color: var(--yan-metin-2); font-size:11px; }

.nav{ padding: 12px; flex:1; overflow-y:auto; }
.nav .bl{
  color: var(--yan-bl); font-size:10.5px; font-weight:700;
  text-transform: uppercase; letter-spacing:.8px;
  padding: 14px 12px 6px;
}
.nav a{
  display:flex; align-items:center; gap:12px;
  padding: 9px 12px; border-radius: var(--r);
  color: var(--yan-metin); font-weight:500;
  margin-bottom: 2px;
  transition: background .12s, color .12s;
}
.nav a:hover{ background: var(--yan-hov); color:#f8fafc; }
.nav a.et{
  background: var(--yan-akt-bg); color:#fff;
  box-shadow: 0 4px 12px -4px var(--yan-akt);
}
.nav a.et svg{ color:#fff; }

.alt{ padding: 12px; border-top: 1px solid var(--yan-cizgi); }
.cikis{
  display:flex; align-items:center; gap:12px;
  padding: 9px 12px; border-radius: var(--r);
  color: var(--yan-metin-2); font-weight:500;
}
.cikis:hover{ background: var(--yan-hov); color: var(--kotu); }

/* ── Ana ── */
.ana{
  margin-left: var(--yan-w);
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.ust{
  height: var(--ust-h);
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  display:flex; align-items:center; gap:16px;
  padding: 0 24px;
  position: sticky; top:0; z-index: 20;
}
.ust h1{ font-size:17px; font-weight:700; margin:0; flex:1; }
.ust .sag{ display:flex; align-items:center; gap:10px; }
.ust .tema{
  width:38px; height:38px; border-radius:10px;
  color: var(--metin-2); display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--cizgi);
}
.ust .tema:hover{ background: var(--yuzey-2); color: var(--metin); }
.ust .tema .tg-karanlik{ display:none; }
:root.karanlik .ust .tema .tg-acik{ display:none; }
:root.karanlik .ust .tema .tg-karanlik{ display:inline-flex; }

.ust .kul{
  display:flex; align-items:center; gap:10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--cizgi);
  border-radius: 30px;
}
.ust .av{
  width:32px; height:32px; border-radius:50%;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}
.ust .ki{ font-size:12.5px; line-height:1.15; }
.ust .ki b{ font-weight:600; }
.ust .ki small{ color: var(--metin-2); font-size:11px; display:block; }
.hamb{
  width:38px; height:38px; border-radius:10px; display:none;
  color: var(--metin); border: 1px solid var(--cizgi);
  align-items:center; justify-content:center;
}
.hamb:hover{ background: var(--yuzey-2); }

/* ── Icerik ── */
.icerik{
  padding: 24px;
  max-width: 1400px;
  width:100%;
  margin: 0 auto;
}

/* ── Sayfa basligi ── */
.baslik{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 16px; margin: 0 0 20px;
}
.baslik h2{ margin:0; font-size:20px; font-weight:700; letter-spacing:-.2px; }
.baslik .ab{ margin: 4px 0 0; color: var(--metin-2); font-size:13px; }
.baslik .ak{ display:flex; gap:10px; align-items:center; }

/* ── Kartlar ── */
.kart{
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-2);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--golge);
}
.kart h3{
  margin: 0 0 16px;
  font-size: 14px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.kart h3 svg{ color: var(--link); }
.kart p{ color: var(--metin-2); }

/* ── Kutular (istatistik) ── */
.izgara{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 20px;
}
.kutu{
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-2);
  padding: 20px;
  box-shadow: var(--golge);
}
.kutu .ik{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 14px;
}
.kutu .s{ font-size:26px; font-weight:800; letter-spacing:-.5px; line-height:1; }
.kutu .e{ color: var(--metin-2); font-size:13px; margin-top:6px; font-weight:500; }
.kutu .fark{ font-size:11.5px; margin-top:8px; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.kutu .fark.iyi{ color: var(--iyi); }
.kutu .fark.kotu{ color: var(--kotu); }

/* ── Tablolar ── */
.tablo-sarma{
  overflow-x: auto;
  border-radius: var(--r-2);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
}
table{ width:100%; border-collapse: collapse; font-size:13.5px; }
th{
  text-align:left; padding: 12px 14px;
  color: var(--metin-2); font-weight:600;
  font-size: 11.5px; text-transform: uppercase; letter-spacing:.4px;
  border-bottom: 1px solid var(--cizgi);
  background: var(--yuzey-2);
  position: sticky; top: 0; z-index: 1;
}
td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--cizgi-2);
  vertical-align: middle;
}
tbody tr:last-child td{ border-bottom: 0; }
tbody tr:hover{ background: var(--yuzey-2); }
th.sag, td.sag{ text-align:right; }
th.orta, td.orta{ text-align:center; }
td.zayif{ color: var(--metin-2); }
td code, .kod{
  background: var(--yuzey-2);
  padding: 2px 8px; border-radius: 6px;
  font-size: 12.5px; color: var(--link);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Rozet ── */
.rz{
  display: inline-flex; align-items:center; gap:5px;
  font-size: 11.5px; padding: 3px 10px;
  border-radius: 20px; font-weight:600;
  line-height:1.4;
}
.rz.iyi{ background: var(--iyi-bg); color: var(--iyi); }
.rz.kotu{ background: var(--kotu-bg); color: var(--kotu); }
.rz.uyari{ background: var(--uyari-bg); color: var(--uyari); }
.rz.bilgi{ background: var(--bilgi-bg); color: var(--bilgi); }
.rz.pas{ background: var(--cizgi); color: var(--metin-2); }

/* ── Butonlar ── */
.dg{
  display: inline-flex; align-items: center; gap:7px;
  background: var(--link); color: #fff;
  border: 0; border-radius: 10px;
  padding: 10px 16px; font-weight: 600;
  cursor: pointer; font-size: 13.5px;
  transition: background .12s, box-shadow .12s;
}
.dg:hover{ background: var(--link-h); box-shadow: 0 6px 16px -6px var(--link); }
.dg.k{ background: var(--kotu); }
.dg.k:hover{ background: #dc2626; box-shadow: 0 6px 16px -6px var(--kotu); }
.dg.i{ background: var(--iyi); }
.dg.hafif{
  background: var(--yuzey); color: var(--metin);
  border: 1px solid var(--cizgi);
}
.dg.hafif:hover{ background: var(--yuzey-2); }
.dg.kucuk{ padding: 6px 12px; font-size: 12.5px; }

/* ── Form ── */
form.satir{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
}
form.satir label{
  display:flex; flex-direction:column; gap:6px;
  font-size:12.5px; color: var(--metin-2); font-weight:600;
  min-width: 150px; flex: 1;
}
input, select, textarea{
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  color: var(--metin);
  border-radius: 10px;
  padding: 10px 12px;
  outline: 0;
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
input::placeholder{ color: var(--metin-3); }

.arama-kutusu{
  position: relative;
}
.arama-kutusu svg{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--metin-3);
}
.arama-kutusu input{ padding-left: 38px; }

/* ── Uyari kutulari ── */
.uy{
  padding: 12px 16px; border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid;
  font-size: 13.5px;
}
.uy-iyi{ background: var(--iyi-bg); color: var(--iyi); border-color: transparent; }
.uy-kotu{ background: var(--kotu-bg); color: var(--kotu); border-color: transparent; }
.uy-uyari{ background: var(--uyari-bg); color: var(--uyari); border-color: transparent; }
.uy-bilgi{ background: var(--bilgi-bg); color: var(--bilgi); border-color: transparent; }

/* ── Bos durum ── */
.bos{
  text-align:center; color: var(--metin-3);
  padding: 60px 20px;
}
.bos svg{ color: var(--metin-3); margin-bottom: 12px; }
.bos b{ display:block; color: var(--metin); font-weight:600; margin: 8px 0 4px; }
.bos p{ margin: 4px 0; font-size:13.5px; }
.bos .dg{ margin-top: 16px; }

/* ── Iskelet yukleme ── */
.iskelet{
  background: linear-gradient(90deg, var(--cizgi-2) 0%, var(--yuzey-2) 50%, var(--cizgi-2) 100%);
  background-size: 200% 100%;
  animation: iskelet 1.4s infinite;
  border-radius: 6px;
  height: 14px;
}
@keyframes iskelet{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ── Pagination ── */
.sayfa{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 16px;
  border-top: 1px solid var(--cizgi);
  gap: 12px; flex-wrap: wrap;
}
.sayfa .bil{ color: var(--metin-2); font-size:12.5px; }
.sayfa .btnlar{ display:flex; gap:6px; }
.sayfa .btnlar a, .sayfa .btnlar span{
  min-width: 34px; height: 34px;
  display: inline-flex; align-items:center; justify-content:center;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--cizgi);
  color: var(--metin);
  font-size: 13px;
}
.sayfa .btnlar a:hover{ background: var(--yuzey-2); }
.sayfa .btnlar a.aktif, .sayfa .btnlar span.aktif{
  background: var(--link); color: #fff; border-color: var(--link);
}
.sayfa .btnlar .pas{ color: var(--metin-3); pointer-events:none; }

/* ── Modal / Drawer ── */
.perde{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .18s;
  z-index: 50;
}
.perde.acik{ opacity: 1; pointer-events: auto; }

.modal{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  z-index: 60;
}
.modal.acik{ display: flex; }
.modal .kutu{
  background: var(--yuzey);
  border-radius: 14px;
  max-width: 480px; width: calc(100% - 32px);
  padding: 24px;
  box-shadow: var(--golge-3);
}
.modal h3{ margin:0 0 12px; font-size:16px; }
.modal .aksiyon{ display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }

.drawer{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--yuzey);
  transform: translateX(100%);
  transition: transform .22s;
  z-index: 60;
  overflow-y: auto;
  box-shadow: var(--golge-3);
}
.drawer.acik{ transform: translateX(0); }
.drawer .db{
  padding: 20px 24px;
  border-bottom: 1px solid var(--cizgi);
  display:flex; align-items:center; justify-content:space-between;
  position: sticky; top: 0; background: var(--yuzey); z-index:1;
}
.drawer .db h3{ margin:0; font-size:16px; }
.drawer .db .kapat{
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color: var(--metin-2);
}
.drawer .db .kapat:hover{ background: var(--yuzey-2); color: var(--metin); }
.drawer .gvd{ padding: 20px 24px; }

/* ── Toast ── */
.toastYer{
  position: fixed; top: 20px; right: 20px;
  display:flex; flex-direction:column; gap: 8px;
  z-index: 100; pointer-events: none;
}
.toast{
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--link);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--golge-2);
  min-width: 260px; max-width: 400px;
  font-size: 13.5px;
  animation: toast-in .2s ease-out;
  pointer-events: auto;
}
.toast.iyi{ border-left-color: var(--iyi); }
.toast.kotu{ border-left-color: var(--kotu); }
.toast.uyari{ border-left-color: var(--uyari); }
@keyframes toast-in{ from{ transform:translateX(20px); opacity:0; } to{ transform:translateX(0); opacity:1; } }

/* ── Giris ── */
body.ciplak{
  display:flex; align-items:center; justify-content:center;
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #1e293b, #0b1220);
}
:root.karanlik body.ciplak{ background: radial-gradient(1200px 600px at 50% -10%, #131c2e, #060b17); }
.giris{
  background: var(--yuzey);
  color: var(--metin);
  border-radius: 18px;
  padding: 36px 32px;
  width: 400px; max-width: calc(100% - 32px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
.giris .lg{
  width: 54px; height: 54px; border-radius: 15px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:22px;
  margin: 0 auto 16px;
}
.giris h1{ text-align:center; font-size:19px; margin:0 0 4px; }
.giris p{ text-align:center; color: var(--metin-2); margin: 0 0 24px; font-size: 13px; }
.giris label{ display:block; font-size:12.5px; font-weight:600; color: var(--metin-2); margin: 14px 0 6px; }
.giris .dg{ width:100%; justify-content:center; margin-top:22px; padding:12px; }

/* ── Sekmeler ── */
.sekmeler{
  display:flex; gap:2px;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 20px;
}
.sekmeler a{
  padding: 10px 16px;
  color: var(--metin-2);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sekmeler a.et{ color: var(--link); border-color: var(--link); font-weight:600; }
.sekmeler a:hover:not(.et){ color: var(--metin); }

/* ── Mobil ── */
@media (max-width: 900px){
  .yan{ transform: translateX(-100%); }
  .yan.acik{ transform: translateX(0); }
  .ana{ margin-left: 0; }
  .hamb{ display: flex; }
  .ust h1{ font-size: 15px; }
  .ust .kul .ki{ display: none; }
  .icerik{ padding: 16px; }
  .kart{ padding: 16px; }
  .baslik{ flex-direction: column; align-items: stretch; }
  .baslik .ak{ justify-content: flex-end; }
}

/* ── Erisilebilirlik ── */
*:focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible{ outline-offset: 3px; }

/* Kaydırma çubuğu */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--cizgi); border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background: var(--metin-3); }