:root {
  --zemin: #15110d; --ahsap: #221a13; --ahsap2: #2c2219; --ahsap3: #3a2c1e; --cizgi: #5e4824;
  --altin: #e8bf57; --altin2: #c9a24a; --altin-koyu: #8a6a2a; --parsomen: #ecdfc3; --yazi: #eadfc8; --soluk: #b39c74;
  --yesil: #4f9a5c; --kirmizi: #a8423b; --mavi: #5b8bd6;
  --font-baslik: 'Cinzel', Georgia, serif; --font: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--zemin); color: var(--yazi); font: 14px/1.5 var(--font);
  background-image: radial-gradient(ellipse at top, #2a1f15 0%, var(--zemin) 60%); }
.gizli { display: none !important; }
h1, h2, h3 { font-family: var(--font-baslik); font-weight: 700; letter-spacing: .04em; color: var(--altin); margin: 0; }
h3 { font-size: 15px; margin-bottom: 12px; }
code { font-family: var(--mono); background: #0c0a08; padding: 1px 5px; border-radius: 3px; color: var(--parsomen); }
a { color: var(--altin); cursor: pointer; }

/* giriş */
.ekran-ortala { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.parsomen { background: linear-gradient(180deg, var(--ahsap2), var(--ahsap)); border: 2px solid var(--altin-koyu);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #6f5427, 0 20px 50px #0009; border-radius: 6px; padding: 28px; width: min(380px, 100%); }
.parsomen .arma { text-align: center; font-size: 40px; color: var(--altin); line-height: 1; }
.parsomen h1 { text-align: center; font-size: 28px; margin: 6px 0 2px; }
.parsomen .alt { text-align: center; color: var(--soluk); margin: 0 0 18px; }
label { display: block; color: var(--soluk); font-size: 12px; margin-bottom: 10px; }
input, select, textarea { font: inherit; color: var(--yazi); background: #0f0c09; border: 1px solid var(--cizgi); border-radius: 4px; padding: 8px 10px; width: 100%; margin-top: 4px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--altin); box-shadow: 0 0 0 2px #e8bf5733; }
.hata { color: #ff9b8f; min-height: 1.2em; margin: 8px 0 0; font-size: 13px; }
.kucuk { color: var(--soluk); font-size: 12px; margin: 6px 0 0; }

/* düğmeler */
.dugme { font: 600 13px var(--font); color: var(--yazi); background: var(--ahsap3); border: 1px solid var(--cizgi); border-radius: 4px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dugme:hover { border-color: var(--altin2); }
.dugme:disabled { opacity: .45; cursor: default; }
.dugme.altin { background: linear-gradient(180deg, #c9a24a, #8a6a2a); color: #1b130b; border-color: #e8bf57; }
.dugme.yesil { background: linear-gradient(180deg, #5aa868, #356b40); border-color: #7cc98a; }
.dugme.kirmizi { background: linear-gradient(180deg, #b44c44, #75302a); border-color: #d77068; }
.dugme.kucuk-d { padding: 4px 9px; font-size: 12px; }
.bag { background: none; border: 1px solid var(--cizgi); color: var(--soluk); border-radius: 4px; padding: 4px 10px; cursor: pointer; font: inherit; }
.dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.parsomen .dugme { width: 100%; justify-content: center; margin-top: 6px; }

/* yerleşim */
#uygulama { display: flex; min-height: 100%; }
#kenar { width: 210px; flex: none; background: linear-gradient(180deg, #241b13, #1a140e); border-right: 2px solid var(--altin-koyu);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.logo { font-family: var(--font-baslik); font-weight: 700; color: var(--altin); font-size: 18px; padding: 18px 16px; border-bottom: 1px solid var(--cizgi); letter-spacing: .08em; }
.logo span { margin-right: 6px; }
#menu { flex: 1; padding: 10px 0; overflow-y: auto; }
#menu a { display: block; padding: 9px 16px; color: var(--yazi); text-decoration: none; border-left: 3px solid transparent; }
#menu a:hover { background: #2e2318; }
#menu a.aktif { background: #3a2c1c; border-left-color: var(--altin); color: var(--altin); }
.kenar-alt { padding: 12px 16px; border-top: 1px solid var(--cizgi); display: flex; justify-content: space-between; align-items: center; color: var(--soluk); font-size: 12px; }
main { flex: 1; min-width: 0; padding: 0 22px 30px; }
#ust { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--cizgi); margin-bottom: 18px; position: sticky; top: 0; background: var(--zemin); z-index: 5; }
#ust h2 { font-size: 20px; flex: 1; }
#menu-ac { display: none; }
.durum-rozet { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--cizgi); color: var(--soluk); }
.durum-rozet.acik { color: #9fe0aa; border-color: #3d7a49; background: #1b2b1d; }
.durum-rozet.kapali { color: #ffb0a6; border-color: #7a3d37; background: #2b1b1a; }

/* kartlar / çerçeveler */
.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kart, .cerceve { background: linear-gradient(180deg, var(--ahsap2), var(--ahsap)); border: 1px solid var(--cizgi); border-radius: 6px; box-shadow: inset 0 1px 0 #ffffff08; }
.kart { padding: 12px 14px; position: relative; }
.kart::before { content: ''; position: absolute; inset: 3px; border: 1px solid #e8bf5714; border-radius: 4px; pointer-events: none; }
.kart .etiket { color: var(--soluk); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.kart .deger { font-family: var(--font-baslik); font-size: 22px; color: var(--parsomen); margin-top: 2px; }
.cerceve { padding: 16px; margin-bottom: 14px; }
.cerceve.dar { max-width: 420px; }
.ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.ikili .cerceve { margin-bottom: 0; }
.ikili { margin-bottom: 14px; }
.satir { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.satir label { margin: 0; flex: 1; min-width: 120px; }
.satir input { margin: 0; flex: 1; min-width: 180px; }
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.liste li { background: #0f0c09; border: 1px solid var(--cizgi); border-radius: 4px; padding: 4px 9px; }
.liste li.bos { border: none; background: none; color: var(--soluk); padding: 0; }
.sayac { font-family: var(--font); font-size: 12px; color: var(--soluk); margin-left: 6px; }

/* konsol */
.konsol { margin: 0; background: #0b0907; border: 1px solid var(--cizgi); border-radius: 4px; padding: 10px 12px; font: 12px/1.55 var(--mono);
  color: #d8ccb0; height: calc(100vh - 230px); min-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.konsol.kisa { height: 190px; min-height: 0; }
.konsol .u { color: #f1c76b; } .konsol .h { color: #ff8f84; } .konsol .s { color: #8fd49b; } .konsol .z { color: #7d6e55; }
.konsol-girdi { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.konsol-girdi span { color: var(--altin); font-size: 18px; }
.konsol-girdi input { margin: 0; font-family: var(--mono); }
.kutucuk { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.kutucuk input { width: auto; margin: 0; }
.cerceve.tam { margin-bottom: 0; }

/* tablolar */
.tablo { width: 100%; border-collapse: collapse; }
.tablo th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--soluk); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--cizgi); }
.tablo td { padding: 7px 8px; border-bottom: 1px solid #ffffff0a; vertical-align: middle; }
.tablo tr:hover td { background: #ffffff05; }
.tablo td:last-child { text-align: right; white-space: nowrap; }
.tablo td.ad { font-weight: 500; }
.rozet { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.rozet.acik { background: #1f3a24; color: #9fe0aa; } .rozet.kapali { background: #3a1f1d; color: #ffb0a6; }
.tiklanir { cursor: pointer; color: var(--parsomen); }
.tiklanir:hover { color: var(--altin); }

/* ayar düzenleyici */
.duzenleyici { display: grid; grid-template-columns: 280px 1fr; gap: 14px; }
.dosya-agaci { max-height: calc(100vh - 120px); overflow: auto; margin: 0; }
.dosya-agaci input { margin: 0 0 10px; }
.grup-ad { font-family: var(--font-baslik); color: var(--altin2); font-size: 12px; margin: 10px 0 4px; letter-spacing: .05em; }
.dosya { padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 13px; color: var(--yazi); word-break: break-all; }
.dosya:hover { background: #ffffff08; }
.dosya.secili { background: #3a2c1c; color: var(--altin); }
.editor-alan { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.editor-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.editor-ust b { color: var(--parsomen); font-weight: 600; word-break: break-all; }
.editor-ust .bosluk, .editor-ust #ayar-durum { flex: 1; }
.editor { display: flex; background: #0b0907; border: 1px solid var(--cizgi); border-radius: 4px; height: calc(100vh - 220px); min-height: 300px; overflow: hidden; }
.editor pre { margin: 0; padding: 10px 8px; color: #6b5d45; font: 12.5px/1.6 var(--mono); text-align: right; user-select: none; overflow: hidden; min-width: 42px; border-right: 1px solid #ffffff0d; }
.editor textarea { border: 0; margin: 0; border-radius: 0; resize: none; background: transparent; font: 12.5px/1.6 var(--mono); padding: 10px; white-space: pre; overflow: auto; tab-size: 2; flex: 1; }
.kirinti { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.kirinti a { text-decoration: none; }
.kirinti span { color: var(--soluk); }

/* yükleme alanı */
.birak { border: 2px dashed var(--cizgi); border-radius: 6px; padding: 22px; text-align: center; color: var(--soluk); transition: .15s; }
.birak.ustunde { border-color: var(--altin); color: var(--altin); background: #e8bf570a; }
.baglanti { display: inline; color: var(--altin); cursor: pointer; text-decoration: underline; font-size: inherit; margin: 0; }
.ilerleme { height: 6px; background: #0b0907; border-radius: 3px; overflow: hidden; margin-top: 10px; border: 1px solid var(--cizgi); }
.ilerleme div { height: 100%; width: 0; background: linear-gradient(90deg, var(--altin-koyu), var(--altin)); transition: width .2s; }

/* bildirim / onay */
#bildirim { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.not { background: var(--ahsap2); border: 1px solid var(--altin-koyu); border-left: 4px solid var(--altin); padding: 10px 14px; border-radius: 4px; max-width: 380px; box-shadow: 0 8px 24px #0008; }
.not.hata-not { border-left-color: var(--kirmizi); }
.perde { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 40; padding: 16px; }
.kucuk-pencere { width: min(420px, 100%); }
.kucuk-pencere .dugme { width: auto; }
.kucuk-pencere .dugmeler { justify-content: flex-end; }

@media (max-width: 860px) {
  #kenar { position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  #kenar.acik { transform: none; }
  #menu-ac { display: inline-block; }
  main { padding: 0 16px 30px; }
  .duzenleyici { grid-template-columns: 1fr; }
  .dosya-agaci { max-height: 240px; }
  .tablo th:nth-child(3), .tablo td:nth-child(3) { display: none; }
}