:root {
  --zemin: #0f1117; --yan: #141824; --kart: #181d2a; --kart2: #1e2433; --cizgi: #2a3142; --cizgi2: #353d52;
  --metin: #e8eaf0; --soluk: #9aa3b8; --silik: #6b7489;
  --altin: #e9b949; --altin2: #f5d27a; --altin-z: rgba(233,185,73,.12);
  --yesil: #3ecf8e; --yesil-z: rgba(62,207,142,.12); --kirmizi: #f16063; --kirmizi-z: rgba(241,96,99,.12);
  --sari: #f5b74f; --sari-z: rgba(245,183,79,.12); --mavi: #5b9cf5; --mavi-z: rgba(91,156,245,.12);
  --r: 12px; --golge: 0 8px 24px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--zemin); color: var(--metin); font: 14px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
a { color: var(--altin); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.gizli { display: none !important; }
code, .mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; }

/* ---------- yerleşim */
.kabuk { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.yan { background: var(--yan); border-right: 1px solid var(--cizgi); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--cizgi); }
.logo .rozet { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--altin2), #b8861f); color: #2a1d05;
  display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.logo b { font-size: 16px; letter-spacing: .3px; } .logo small { display: block; color: var(--silik); font-size: 11.5px; margin-top: -2px; }
.menu { padding: 12px 10px; overflow-y: auto; flex: 1; }
.menu .baslik { color: var(--silik); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; margin: 14px 12px 6px; }
.menu a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--soluk); margin-bottom: 2px; }
.menu a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.menu a:hover { background: var(--kart); color: var(--metin); }
.menu a.aktif { background: var(--altin-z); color: var(--altin2); }
.menu a.aktif svg { opacity: 1; }
.yan-alt { border-top: 1px solid var(--cizgi); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--kart2); display: grid; place-items: center; font-weight: 700; color: var(--altin); }
.yan-alt .ad { flex: 1; min-width: 0; } .yan-alt .ad b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yan-alt .ad small { color: var(--silik); }
.icerik { min-width: 0; }
.ust { display: flex; align-items: center; gap: 14px; padding: 18px 28px; border-bottom: 1px solid var(--cizgi); position: sticky; top: 0;
  background: rgba(15,17,23,.92); backdrop-filter: blur(8px); z-index: 5; }
.ust h1 { font-size: 20px; margin: 0; font-weight: 650; } .ust .aciklama { color: var(--silik); font-size: 13px; }
.ust .sag { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.sayfa { padding: 24px 28px 60px; max-width: 1400px; }

/* ---------- kartlar / ızgaralar */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px 20px; }
.kart h2, .kart h3 { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.kart .kart-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .kart .kart-ust h2, .kart .kart-ust h3 { margin: 0; }
.kart .kart-ust .sag { margin-left: auto; display: flex; gap: 8px; }
.izgara { display: grid; gap: 16px; }
.izgara.i4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.izgara.i3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.izgara.i2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.bosluk { height: 16px; }
.istatistik { display: flex; flex-direction: column; gap: 4px; }
.istatistik .etiket { color: var(--soluk); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.istatistik .deger { font-size: 28px; font-weight: 700; letter-spacing: -.3px; }
.istatistik .alt { color: var(--silik); font-size: 12.5px; }
.cubuk { height: 8px; border-radius: 99px; background: var(--kart2); overflow: hidden; margin-top: 8px; }
.cubuk i { display: block; height: 100%; background: var(--altin); border-radius: 99px; }
.cubuk.yesil i { background: var(--yesil); } .cubuk.kirmizi i { background: var(--kirmizi); } .cubuk.sari i { background: var(--sari); }

/* ---------- rozetler / noktalar */
.rozetcik { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rozetcik.yesil { background: var(--yesil-z); color: var(--yesil); } .rozetcik.kirmizi { background: var(--kirmizi-z); color: var(--kirmizi); }
.rozetcik.sari { background: var(--sari-z); color: var(--sari); } .rozetcik.mavi { background: var(--mavi-z); color: var(--mavi); }
.rozetcik.gri { background: var(--kart2); color: var(--soluk); } .rozetcik.altin { background: var(--altin-z); color: var(--altin2); }
.nokta { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--silik); flex: none; }
.nokta.yesil { background: var(--yesil); box-shadow: 0 0 0 3px var(--yesil-z); } .nokta.kirmizi { background: var(--kirmizi); box-shadow: 0 0 0 3px var(--kirmizi-z); }
.nokta.sari { background: var(--sari); box-shadow: 0 0 0 3px var(--sari-z); }

/* ---------- düğmeler / formlar */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--cizgi2);
  background: var(--kart2); color: var(--metin); cursor: pointer; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.btn:hover { border-color: var(--soluk); } .btn:disabled { opacity: .45; cursor: default; }
.btn svg { width: 16px; height: 16px; }
.btn.ana { background: linear-gradient(180deg, var(--altin2), var(--altin)); color: #2a1d05; border-color: transparent; }
.btn.ana:hover { filter: brightness(1.06); }
.btn.tehlike { background: var(--kirmizi-z); color: var(--kirmizi); border-color: rgba(241,96,99,.35); }
.btn.tehlike:hover { background: rgba(241,96,99,.2); }
.btn.basari { background: var(--yesil-z); color: var(--yesil); border-color: rgba(62,207,142,.35); }
.btn.kucuk { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }
.btn.hayalet { background: transparent; border-color: transparent; color: var(--soluk); } .btn.hayalet:hover { color: var(--metin); background: var(--kart2); }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  background: #11151f; border: 1px solid var(--cizgi2); border-radius: 9px; padding: 8px 11px; outline: none; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--altin); box-shadow: 0 0 0 3px var(--altin-z); }
textarea { resize: vertical; min-height: 80px; }
label.alan { display: block; margin-bottom: 12px; } label.alan > span { display: block; color: var(--soluk); font-size: 12.5px; margin-bottom: 5px; }
.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.satir > * { flex: 1; } .satir > .sabit { flex: none; }
.araclar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.araclar .arama { max-width: 320px; }
.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); margin-bottom: 16px; flex-wrap: wrap; }
.sekmeler button { background: none; border: none; padding: 10px 14px; color: var(--soluk); cursor: pointer; border-bottom: 2px solid transparent; font-weight: 600; }
.sekmeler button:hover { color: var(--metin); } .sekmeler button.aktif { color: var(--altin2); border-bottom-color: var(--altin); }
.sekmeler button .sayi { background: var(--kart2); border-radius: 99px; padding: 0 7px; font-size: 11.5px; margin-left: 5px; color: var(--soluk); }

/* anahtar (toggle) */
.anahtar { position: relative; width: 42px; height: 24px; display: inline-block; flex: none; }
.anahtar input { opacity: 0; width: 0; height: 0; }
.anahtar span { position: absolute; inset: 0; background: #394157; border-radius: 99px; cursor: pointer; transition: .18s; }
.anahtar span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .18s; }
.anahtar input:checked + span { background: var(--yesil); } .anahtar input:checked + span::before { transform: translateX(18px); }
.anahtar input:disabled + span { opacity: .5; cursor: default; }

/* ---------- tablo */
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r); }
table.tablo { width: 100%; border-collapse: collapse; }
.tablo th { text-align: left; font-weight: 600; color: var(--soluk); font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  padding: 10px 14px; background: var(--kart2); border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo td { padding: 10px 14px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover td { background: rgba(255,255,255,.02); }
.tablo .sag { text-align: right; } .tablo .dar { width: 1%; white-space: nowrap; }
.tablo .soluk, .soluk { color: var(--soluk); } .silik { color: var(--silik); }
.bos { text-align: center; color: var(--silik); padding: 30px !important; }
.esya { display: flex; align-items: center; gap: 10px; } .esya img { width: 32px; height: 32px; image-rendering: auto; flex: none; }
.esya .ad { font-weight: 600; } .esya small { display: block; color: var(--silik); }

/* ---------- bayrak / giriş satırları */
.liste-kart { display: flex; flex-direction: column; }
.liste-satir { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
.liste-satir:last-child { border-bottom: 0; }
.liste-satir .bilgi { flex: 1; min-width: 0; }
.liste-satir .bilgi b { display: block; } .liste-satir .bilgi small { color: var(--soluk); display: block; }
.liste-satir .bilgi .kod { color: var(--silik); font-family: Consolas, monospace; font-size: 12px; }
.liste-satir .uyari-yazi { color: var(--sari); font-size: 12.5px; margin-top: 3px; }
.liste-satir input[type=number] { width: 110px; }

/* ---------- uyarı kutuları */
.kutu { border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px; display: flex; gap: 12px; align-items: flex-start; }
.kutu svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.kutu.bilgi { background: var(--mavi-z); border: 1px solid rgba(91,156,245,.3); } .kutu.bilgi svg { color: var(--mavi); }
.kutu.uyari { background: var(--sari-z); border: 1px solid rgba(245,183,79,.3); } .kutu.uyari svg { color: var(--sari); }
.kutu.hata { background: var(--kirmizi-z); border: 1px solid rgba(241,96,99,.3); } .kutu.hata svg { color: var(--kirmizi); }
.kutu.basari { background: var(--yesil-z); border: 1px solid rgba(62,207,142,.3); } .kutu.basari svg { color: var(--yesil); }
.kutu > div > b:first-child { display: block; margin-bottom: 2px; }

/* ---------- pencere (modal) / bildirim */
.perde { position: fixed; inset: 0; background: rgba(5,7,12,.7); display: grid; place-items: center; z-index: 50; padding: 20px; animation: bel .12s; }
.pencere { background: var(--kart); border: 1px solid var(--cizgi2); border-radius: 16px; width: min(560px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--golge); }
.pencere.genis { width: min(900px, 100%); }
.pencere .p-ust { padding: 16px 20px; border-bottom: 1px solid var(--cizgi); display: flex; align-items: center; }
.pencere .p-ust h3 { margin: 0; font-size: 16px; } .pencere .p-ust .btn { margin-left: auto; }
.pencere .p-govde { padding: 18px 20px; overflow-y: auto; }
.pencere .p-alt { padding: 14px 20px; border-top: 1px solid var(--cizgi); display: flex; gap: 10px; justify-content: flex-end; }
@keyframes bel { from { opacity: 0; } to { opacity: 1; } }
.bildirimler { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 60; }
.bildirim { background: var(--kart2); border: 1px solid var(--cizgi2); border-left: 4px solid var(--yesil); border-radius: 10px; padding: 11px 16px;
  box-shadow: var(--golge); max-width: 420px; animation: kay .18s; }
.bildirim.hata { border-left-color: var(--kirmizi); } .bildirim.uyari { border-left-color: var(--sari); }
@keyframes kay { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- giriş ekranı */
.giris-kap { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(ellipse at top, #1d2436 0%, var(--zemin) 60%); }
.giris-kart { width: min(400px, 100%); background: var(--kart); border: 1px solid var(--cizgi2); border-radius: 18px; padding: 30px; box-shadow: var(--golge); }
.giris-kart .logo { border: 0; padding: 0 0 18px; justify-content: center; }
.giris-kart h2 { text-align: center; margin: 0 0 6px; } .giris-kart p { text-align: center; color: var(--soluk); margin: 0 0 20px; }
.giris-kart .btn { width: 100%; padding: 11px; }
.yukleniyor { display: grid; place-items: center; padding: 60px; color: var(--silik); }
.donme { width: 26px; height: 26px; border: 3px solid var(--cizgi2); border-top-color: var(--altin); border-radius: 50%; animation: don .8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.kaydirma-kutu { background: #0b0e14; border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px; max-height: 520px; overflow: auto;
  white-space: pre-wrap; word-break: break-all; font-family: Consolas, monospace; font-size: 12px; color: #c5cbd8; }
iframe.gomulu { width: 100%; height: calc(100vh - 150px); border: 1px solid var(--cizgi); border-radius: var(--r); background: #16070b; }
@media (max-width: 900px) { .kabuk { grid-template-columns: 1fr; } .yan { position: static; height: auto; } .izgara.i2 { grid-template-columns: 1fr; } }

/* ---------- takvim (Faz 4) */
input[type=datetime-local] { width: 100%; background: #11151f; border: 1px solid var(--cizgi2); border-radius: 9px; padding: 8px 11px; outline: none; color-scheme: dark; }
.takvim { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.takvim .gb { color: var(--silik); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; text-align: center; padding: 4px 0; }
.takvim .gun { background: var(--kart2); border: 1px solid var(--cizgi); border-radius: 9px; min-height: 92px; padding: 6px; font-size: 12px; overflow: hidden; }
.takvim .gun.bos { background: transparent; border-style: dashed; opacity: .35; }
.takvim .gun.bugun { border-color: var(--altin); box-shadow: 0 0 0 2px var(--altin-z); }
.takvim .gun .no { color: var(--soluk); font-weight: 700; margin-bottom: 4px; }
.takvim .olay { display: block; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 2px 6px; margin-top: 3px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; background: var(--mavi-z); color: var(--mavi); }
.takvim .olay.aktif { background: var(--yesil-z); color: var(--yesil); }
.takvim .olay.bitti { background: var(--kart); color: var(--silik); }
.takvim .olay.etkisiz { background: var(--kart); color: var(--soluk); font-style: italic; }
@media (max-width: 900px) { .takvim .gun { min-height: 60px; } .takvim .olay { font-size: 10.5px; } }

/* ---------- proto editörleri */
.editor-kabuk { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
.editor-liste { position: sticky; top: 90px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; }
.editor-liste .liste-kutu { overflow: auto; margin-top: 10px; flex: 1; min-height: 200px; }
.liste-oge { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: 0; background: none; border-radius: 9px;
  cursor: pointer; text-align: left; color: var(--metin); }
.liste-oge:hover { background: var(--kart2); } .liste-oge.secili { background: var(--altin-z); box-shadow: inset 3px 0 0 var(--altin); }
.liste-oge img { width: 32px; height: 32px; flex: none; }
.liste-oge .ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.liste-oge small { color: var(--silik); display: block; font-weight: 400; font-size: 11.5px; }
.ed-bas { display: flex; gap: 16px; align-items: center; }
.ed-bas .buyuk-ikon { width: 64px; height: 64px; border-radius: 12px; background: var(--kart2); border: 1px solid var(--cizgi); display: grid; place-items: center; flex: none; }
.ed-bas .buyuk-ikon img { width: 48px; height: 48px; image-rendering: auto; }
.ed-bas input.ad-girdi { font-size: 19px; font-weight: 700; background: transparent; border: 1px solid transparent; padding: 4px 8px; margin-left: -8px; }
.ed-bas input.ad-girdi:hover, .ed-bas input.ad-girdi:focus { border-color: var(--cizgi2); background: #11151f; }
.kaydet-cubugu { position: sticky; bottom: 12px; z-index: 5; margin-top: 16px; display: flex; gap: 10px; align-items: center; padding: 12px 16px;
  background: rgba(24,29,42,.96); border: 1px solid var(--altin); border-radius: var(--r); box-shadow: var(--golge); backdrop-filter: blur(6px); }
.kaydet-cubugu .bilgi { flex: 1; color: var(--altin2); font-weight: 600; }
.cip-grup { display: flex; flex-wrap: wrap; gap: 6px; }
.cip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--cizgi2); background: #11151f;
  cursor: pointer; font-size: 12.5px; user-select: none; color: var(--soluk); transition: all .12s; }
.cip:hover { border-color: var(--altin); color: var(--metin); }
.cip.acik { background: var(--altin-z); border-color: var(--altin); color: var(--altin2); }
.cip.bilinmeyen { border-style: dashed; }
.cip small { color: var(--silik); font-family: Consolas, monospace; font-size: 10.5px; }
.alan-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; }
.alan-izgara label.alan small.ipucu { display: block; color: var(--silik); font-size: 11.5px; margin-top: 3px; }
label.alan.degisti > span { color: var(--altin2); } label.alan.degisti input, label.alan.degisti select { border-color: var(--altin); }
.fark-tablo td:nth-child(2) { color: var(--kirmizi); text-decoration: line-through; opacity: .8; } .fark-tablo td:nth-child(3) { color: var(--yesil); }
.ham-tablo td:first-child { color: var(--silik); font-family: Consolas, monospace; font-size: 12px; width: 1%; white-space: nowrap; }
.ham-tablo td:last-child { font-family: Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.rutbe-4, .rutbe-5 { color: var(--kirmizi) !important; } .rutbe-2, .rutbe-3 { color: var(--sari) !important; }
.adim { display: flex; gap: 14px; align-items: flex-start; }
.adim .no { width: 30px; height: 30px; border-radius: 50%; background: var(--altin-z); color: var(--altin2); display: grid; place-items: center; font-weight: 800; flex: none; }
.adim.tamam .no { background: var(--yesil-z); color: var(--yesil); }
pre.kayit-cikti { white-space: pre-wrap; background: #0b0e14; border: 1px solid var(--cizgi); border-radius: 9px; padding: 10px 12px; max-height: 320px; overflow: auto;
  font-family: Consolas, monospace; font-size: 12px; color: var(--soluk); }
@media (max-width: 1100px) { .editor-kabuk { grid-template-columns: 1fr; } .editor-liste { position: static; max-height: 380px; } }

/* ---------- hızlı arama (Ctrl+K) */
.arama-dugme { margin: 12px 12px 0; display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--cizgi2);
  background: #11151f; color: var(--silik); cursor: pointer; font-size: 13px; }
.arama-dugme:hover { border-color: var(--altin); color: var(--metin); } .arama-dugme svg { width: 16px; height: 16px; } .arama-dugme span { flex: 1; text-align: left; }
kbd { font-family: Consolas, monospace; font-size: 10.5px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--cizgi2); background: var(--kart2); color: var(--soluk); }
.komut-perde { place-items: start center !important; padding-top: 12vh; }
.komut { width: min(640px, 94vw); background: var(--kart); border: 1px solid var(--cizgi2); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.55); overflow: hidden; }
.komut-girdi { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
.komut-girdi svg { width: 20px; height: 20px; color: var(--altin); flex: none; }
.komut-girdi input { border: 0 !important; background: transparent !important; font-size: 16px; box-shadow: none !important; padding: 4px 0 !important; }
.komut-sonuc { max-height: 52vh; overflow: auto; padding: 6px; }
.komut-oge { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; color: var(--metin); }
.komut-oge.secili, .komut-oge:hover { background: var(--altin-z); }
.komut-ikon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--kart2); flex: none; }
.komut-ikon svg { width: 18px; height: 18px; color: var(--soluk); } .komut-ikon img { width: 28px; height: 28px; }
.komut-metin { flex: 1; min-width: 0; } .komut-metin b { display: block; font-weight: 600; } .komut-metin small { color: var(--silik); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.komut-alt { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--cizgi); color: var(--silik); font-size: 12px; }

#yukleme-cubugu { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 100; background: linear-gradient(90deg, var(--altin), var(--altin2)); opacity: 0; transition: opacity .2s; pointer-events: none; }
#yukleme-cubugu.aktif { opacity: 1; animation: yukle 1.4s ease-in-out infinite; }
@keyframes yukle { 0% { width: 0; left: 0; } 50% { width: 60%; left: 20%; } 100% { width: 0; left: 100%; } }

/* ---------- ikon stüdyosu */
.dama { background-color: #2a2f3d; background-image: linear-gradient(45deg, #353b4b 25%, transparent 25%), linear-gradient(-45deg, #353b4b 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #353b4b 75%), linear-gradient(-45deg, transparent 75%, #353b4b 75%);
  background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
.kat-seridi { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.kat-seridi .cip { flex: none; }
.kat-seridi .cip b { color: var(--metin); font-weight: 700; margin-left: 2px; }
.ikon-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ikon-kart, 92px), 1fr)); gap: 10px; }
.ikon-kart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 10px;
  background: var(--kart); border: 1px solid var(--cizgi); cursor: pointer; color: var(--metin); transition: border-color .12s, transform .12s; }
.ikon-kart:hover { border-color: var(--altin); transform: translateY(-1px); }
.ikon-kart .kutucuk { width: 100%; aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.ikon-kart img { max-width: 90%; max-height: 90%; image-rendering: pixelated; }
.ikon-kart .ad { font-size: 11px; color: var(--soluk); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.ikon-kart .vnum { font-family: Consolas, "Cascadia Mono", monospace; font-size: 11px; color: var(--altin2); max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin-top: -4px; }
.ikon-kart .vnum.yok { font-family: inherit; font-size: 10.5px; color: var(--silik); font-style: italic; }
.ikon-kart .rozet-sag { position: absolute; top: 6px; right: 6px; }
.ikon-kart .rozet-sol { position: absolute; top: 6px; left: 6px; }
.onizleme-sira { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.onizleme { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.onizleme .cerceve { border-radius: 10px; border: 1px solid var(--cizgi2); display: grid; place-items: center; padding: 10px; min-width: 120px; min-height: 120px; }
.onizleme .cerceve img, .onizleme .cerceve canvas { image-rendering: pixelated; }
.onizleme small { color: var(--soluk); }
.birak-alan { border: 2px dashed var(--cizgi2); border-radius: 12px; padding: 18px; text-align: center; color: var(--soluk); cursor: pointer; transition: all .12s; }
.birak-alan:hover, .birak-alan.ustunde { border-color: var(--altin); color: var(--altin2); background: var(--altin-z); }
.bolum-secici { display: inline-flex; border: 1px solid var(--cizgi2); border-radius: 9px; overflow: hidden; }
.bolum-secici button { border: 0; background: #11151f; color: var(--soluk); padding: 7px 14px; cursor: pointer; font-weight: 600; }
.bolum-secici button.aktif { background: var(--altin-z); color: var(--altin2); }
.esya-secim { max-height: 220px; overflow: auto; border: 1px solid var(--cizgi); border-radius: 9px; padding: 6px 10px; }
.esya-secim label { display: flex; gap: 8px; align-items: center; padding: 3px 0; cursor: pointer; }
/* eşya açıklaması önizlemesi (oyun ipucu penceresine benzer) */
.acik-onizleme { max-width: 300px; background: rgba(10, 12, 18, .92); border: 1px solid #4a4336; border-radius: 4px; padding: 10px 12px;
  font-family: Tahoma, Verdana, sans-serif; font-size: 12px; line-height: 1.45; color: #e8e2d0; text-align: center; white-space: pre-wrap; word-wrap: break-word; }
.acik-onizleme .ad { color: #f2e69f; font-weight: 700; margin-bottom: 6px; }
.acik-onizleme .not { color: #f5a623; margin-top: 4px; }
.acik-onizleme .not:empty { display: none; }