/* Square Floor - Yönetim Paneli. Oyunun arayüzündeki renkler, yazı tipi (KareYazi) ve beyaz kenarlı kartlar. */
@font-face {
    font-family: "KareYazi";
    src: url("fontlar/KareYazi.woff") format("woff");
    font-display: swap;
}

:root {
    --koyu: #1E1F2E;
    --kenar: #17193D;
    --gece: #12133A;
    --pembe: #FF1E9A;
    --sari: #FFC52E;
    --sari-koyu: #E09A00;
    --camgobegi: #36C6EE;
    --mor: #4D52C4;
    --mor-acik: #8D5CF6;
    --mavi: #2F72DB;
    --acik-mavi: #5CD3F5;
    --yesil: #4BD34B;
    --kirmizi: #F23A4C;
    --turuncu: #FF8A2B;
    --gri: #7C8399;
    --metin: #EEF3FF;
    --soluk: #AEB8D8;
    --cizgi: 0 2px 0 #17193D, 2px 0 0 #17193D, -2px 0 0 #17193D, 0 -2px 0 #17193D, 1.5px 1.5px 0 #17193D,
             -1.5px -1.5px 0 #17193D, 1.5px -1.5px 0 #17193D, -1.5px 1.5px 0 #17193D, 0 4px 0 rgba(15, 18, 50, 0.45);
    --cizgi-ince: 0 1px 0 #17193D, 1px 0 0 #17193D, -1px 0 0 #17193D, 0 -1px 0 #17193D, 0 2px 0 rgba(15, 18, 50, 0.4);
    --yazi: "KareYazi", "Titan One", "Arial Rounded MT Bold", system-ui, sans-serif;
    --govde: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    color: var(--metin);
    font-family: var(--govde);
    font-size: 15px;
    line-height: 1.45;
    background: #2457D6;
}

body {
    background-image: linear-gradient(180deg, #2350D2 0%, #2F7FE4 48%, #36BCEB 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* oyundaki gibi ikon deseni */
.arka {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.13;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='18' width='40' height='40' rx='10'/%3E%3Ccircle cx='31' cy='36' r='3' fill='white'/%3E%3Ccircle cx='45' cy='36' r='3' fill='white'/%3E%3Cpath d='M132 22l7 14 15 2-11 10 3 15-14-7-14 7 3-15-11-10 15-2z'/%3E%3Cpath d='M30 132l22 13-22 13z'/%3E%3Cpath d='M126 128h28M140 114v28'/%3E%3Cpath d='M184 70c8-10 16 10 24 0'/%3E%3Cpath d='M86 90l-8 16h12l-8 16'/%3E%3Cpath d='M170 168l16-9 16 9v18l-16 9-16-9z'/%3E%3Cpath d='M84 176c8-10 16 10 24 0'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

.gizli { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- yazılar */
.baslik-yazi, h1, h2, h3, .yazi {
    font-family: var(--yazi);
    font-weight: normal;
    letter-spacing: 0.3px;
}

h1 { font-size: 34px; margin: 0; text-shadow: var(--cizgi); }
h2 { font-size: 22px; margin: 0; text-shadow: var(--cizgi-ince); }
h3 { font-size: 17px; margin: 0; }
.soluk { color: var(--soluk); }
.kucuk { font-size: 13px; }
.ortala { text-align: center; }
.sag { text-align: right; }
.tek-satir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a { color: var(--acik-mavi); }

/* ---------------------------------------------------------------- giriş */
.giris {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.giris-kart {
    width: min(440px, 100%);
    margin-top: 26px;
    padding: 28px 30px 30px;
    background: var(--mavi);
    border: 7px solid #fff;
    border-radius: 30px;
    box-shadow: 0 10px 0 rgba(15, 18, 50, 0.35);
    animation: buyu 0.35s cubic-bezier(.2, 1.4, .4, 1);
}

.giris-kart h2 { font-size: 26px; text-align: center; margin-bottom: 18px; text-shadow: var(--cizgi); }
.giris-kart label { display: block; font-family: var(--yazi); font-size: 15px; margin: 12px 0 6px; text-shadow: var(--cizgi-ince); }
.giris-kart .dugme { width: 100%; margin-top: 20px; font-size: 22px; padding: 12px; }
.giris-hata { margin-top: 14px; min-height: 22px; text-align: center; color: #fff; font-weight: 600; }
.giris-not { margin-top: 14px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.85); }

/* ---------------------------------------------------------------- logo */
.logo { display: flex; flex-direction: column; align-items: center; gap: 2px; user-select: none; }
.logo-kareler { display: flex; gap: 5px; }
.logo-kare {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: 4px solid #fff; border-radius: 10px;
    font-family: var(--yazi); font-size: 22px; color: var(--kenar);
    box-shadow: 0 4px 0 rgba(15, 18, 50, 0.35);
}
.logo-kare:nth-child(1) { background: #FF4FA3; transform: rotate(-8deg); }
.logo-kare:nth-child(2) { background: #FFC93C; transform: rotate(5deg); }
.logo-kare:nth-child(3) { background: #33C9F0; transform: rotate(-4deg); }
.logo-kare:nth-child(4) { background: #8D5CF6; transform: rotate(7deg); }
.logo-kare:nth-child(5) { background: #4CD964; transform: rotate(-6deg); }
.logo-kare:nth-child(6) { background: #FF8A2B; transform: rotate(4deg); }
.logo-floor {
    font-family: var(--yazi); font-size: 56px; line-height: 1; color: #fff; margin-top: 4px;
    text-shadow: 0 3px 0 #17193D, 3px 0 0 #17193D, -3px 0 0 #17193D, 0 -3px 0 #17193D, 2px 2px 0 #17193D, -2px -2px 0 #17193D,
                 2px -2px 0 #17193D, -2px 2px 0 #17193D, 0 9px 0 #E0157A;
}
.logo-alt {
    margin-top: 10px; padding: 3px 14px; border-radius: 999px; border: 3px solid #fff;
    background: var(--sari); color: var(--kenar); font-family: var(--yazi); font-size: 14px; letter-spacing: 1px;
}
.logo--kucuk .logo-kare { width: 26px; height: 26px; font-size: 15px; border-width: 3px; border-radius: 7px; }
.logo--kucuk .logo-kareler { gap: 3px; }
.logo--kucuk .logo-floor { font-size: 36px; text-shadow: 0 2px 0 #17193D, 2px 0 0 #17193D, -2px 0 0 #17193D, 0 -2px 0 #17193D, 0 6px 0 #E0157A; }
.logo--kucuk .logo-alt { font-size: 11px; margin-top: 8px; padding: 2px 10px; }

/* ---------------------------------------------------------------- yerleşim */
.uygulama { position: relative; z-index: 1; display: flex; min-height: 100vh; }

.yan {
    position: sticky; top: 0;
    width: 248px; flex: 0 0 248px;
    height: 100vh;
    display: flex; flex-direction: column;
    padding: 18px 14px;
    background: rgba(18, 19, 58, 0.88);
    border-right: 5px solid #fff;
    overflow-y: auto;
}

.yan .logo { margin-bottom: 20px; }

.menu { display: flex; flex-direction: column; gap: 6px; }
.menu-dugme {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 10px;
    border: 3px solid transparent; border-radius: 14px;
    background: transparent; cursor: pointer;
    font-family: var(--yazi); font-size: 15px; color: #fff; text-align: left;
    text-shadow: var(--cizgi-ince);
    transition: background 0.15s, transform 0.12s;
}
.menu-dugme:hover { background: rgba(255, 255, 255, 0.09); }
.menu-dugme.aktif { background: var(--sari); border-color: #fff; color: var(--kenar); text-shadow: none; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.menu-dugme .ikon-kutu { flex: 0 0 auto; }
.menu-dugme .rozet { margin-left: auto; }

.ikon-kutu {
    width: 32px; height: 32px; border-radius: 10px; border: 3px solid #fff;
    display: inline-flex; align-items: center; justify-content: center; background: var(--mavi);
}
.ikon-kutu svg { width: 18px; height: 18px; }
.ikon { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }

.yan-alt { margin-top: auto; padding-top: 16px; }
.kullanici-kutu {
    display: flex; align-items: center; gap: 10px; padding: 10px;
    background: rgba(255, 255, 255, 0.07); border-radius: 14px; margin-bottom: 8px;
}
.kullanici-kutu .ad { font-family: var(--yazi); font-size: 15px; }
.kullanici-kutu .rol { font-size: 12px; color: var(--soluk); }
.avatar { width: 38px; height: 38px; border-radius: 12px; border: 3px solid #fff; background: var(--pembe) url("gorseller/kup_yuz.png") center/80% no-repeat; flex: 0 0 auto; }

.icerik { flex: 1; min-width: 0; padding: 22px 26px 120px; }

.ust { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ust-yazi { flex: 1; min-width: 240px; }
.ust-alt { margin-top: 6px; color: rgba(255, 255, 255, 0.88); font-size: 14px; }
.ust-durum { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- kartlar */
.kart {
    position: relative;
    background: rgba(24, 26, 64, 0.9);
    border: 5px solid #fff;
    border-radius: 24px;
    box-shadow: 0 7px 0 rgba(15, 18, 50, 0.32);
    margin-bottom: 18px;
    overflow: hidden;
}
.kart-baslik {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--camgobegi);
    font-family: var(--yazi); font-size: 19px; text-shadow: var(--cizgi-ince);
}
.kart-baslik .bosluk { flex: 1; }
.kart-govde { padding: 16px; }
.kart--pembe > .kart-baslik { background: var(--pembe); }
.kart--sari > .kart-baslik { background: var(--sari); color: var(--kenar); text-shadow: none; }
.kart--mor > .kart-baslik { background: var(--mor-acik); }
.kart--yesil > .kart-baslik { background: var(--yesil); }
.kart--turuncu > .kart-baslik { background: var(--turuncu); }
.kart--kirmizi > .kart-baslik { background: var(--kirmizi); }
.kart--mavi > .kart-baslik { background: var(--mavi); }
.kart--camgobegi > .kart-baslik { background: var(--camgobegi); }

.izgara { display: grid; gap: 18px; }
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara > .kart { margin-bottom: 0; }
.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.satir.arali { justify-content: space-between; }
.yigin > * + * { margin-top: 10px; }

/* sayaç kutuları */
.sayaclar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sayac {
    position: relative; padding: 14px 16px 12px; border-radius: 22px; border: 5px solid #fff;
    background: var(--pembe); box-shadow: 0 6px 0 rgba(15, 18, 50, 0.3); overflow: hidden;
    animation: buyu 0.3s cubic-bezier(.2, 1.4, .4, 1) both;
}
.sayac::after {
    content: ""; position: absolute; right: -18px; top: -18px; width: 80px; height: 80px; border-radius: 22px;
    background: rgba(255, 255, 255, 0.14); transform: rotate(18deg);
}
.sayac .deger { font-family: var(--yazi); font-size: 36px; line-height: 1.1; text-shadow: var(--cizgi); }
.sayac .etiket { font-family: var(--yazi); font-size: 14px; text-shadow: var(--cizgi-ince); opacity: 0.95; }
.sayac .alt { font-size: 12px; margin-top: 2px; opacity: 0.9; }
.sayac--camgobegi { background: var(--camgobegi); }
.sayac--mor { background: var(--mor-acik); }
.sayac--sari { background: var(--sari); color: var(--kenar); }
.sayac--sari .deger, .sayac--sari .etiket { color: #fff; }
.sayac--yesil { background: var(--yesil); }
.sayac--turuncu { background: var(--turuncu); }
.sayac--mavi { background: var(--mavi); }
.sayac--pembe { background: var(--pembe); }
.sayac--kirmizi { background: var(--kirmizi); }

/* ---------------------------------------------------------------- düğmeler */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 16px; min-height: 40px;
    border: 4px solid #fff; border-radius: 15px;
    background: var(--sari); color: var(--kenar);
    font-family: var(--yazi); font-size: 16px; letter-spacing: 0.3px; text-transform: none;
    cursor: pointer; user-select: none; white-space: nowrap;
    box-shadow: 0 5px 0 rgba(15, 18, 50, 0.38);
    transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.dugme:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dugme:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(15, 18, 50, 0.38); }
.dugme:disabled { filter: grayscale(0.8) brightness(0.8); cursor: not-allowed; transform: none; }
.dugme--pembe { background: var(--pembe); color: #fff; text-shadow: var(--cizgi-ince); }
.dugme--kirmizi { background: var(--kirmizi); color: #fff; text-shadow: var(--cizgi-ince); }
.dugme--yesil { background: var(--yesil); color: #fff; text-shadow: var(--cizgi-ince); }
.dugme--mavi { background: var(--mavi); color: #fff; text-shadow: var(--cizgi-ince); }
.dugme--camgobegi { background: var(--camgobegi); color: #fff; text-shadow: var(--cizgi-ince); }
.dugme--mor { background: var(--mor-acik); color: #fff; text-shadow: var(--cizgi-ince); }
.dugme--gri { background: #5D6475; color: #fff; text-shadow: var(--cizgi-ince); }
.dugme--turuncu { background: var(--turuncu); color: #fff; text-shadow: var(--cizgi-ince); }
.dugme--kucuk { min-height: 32px; padding: 4px 10px; font-size: 13px; border-width: 3px; border-radius: 11px; box-shadow: 0 3px 0 rgba(15, 18, 50, 0.38); }
.dugme--kucuk:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(15, 18, 50, 0.38); }
.dugme--buyuk { font-size: 22px; padding: 10px 26px; min-height: 54px; border-width: 5px; border-radius: 18px; }
.dugme--ikon { padding: 4px; min-width: 34px; }
.dugme .ikon { width: 17px; height: 17px; }

/* ---------------------------------------------------------------- form */
.alan, .secim, .metin-alani {
    width: 100%; padding: 9px 12px;
    background: rgba(9, 10, 36, 0.65); color: #fff;
    border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 13px;
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.alan:focus, .secim:focus, .metin-alani:focus { border-color: var(--sari); box-shadow: 0 0 0 3px rgba(255, 197, 46, 0.3); }
.alan--kisa { width: 120px; }
.alan--orta { width: 220px; }
.metin-alani { min-height: 90px; resize: vertical; font-family: var(--govde); }
.secim option { background: var(--kenar); color: #fff; }
.etiket-yazi { display: block; font-family: var(--yazi); font-size: 14px; margin-bottom: 5px; text-shadow: var(--cizgi-ince); }
.form-satir { margin-bottom: 14px; }
.arama { position: relative; }
.arama .alan { padding-left: 38px; }
.arama .ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: 0.8; }

/* aç/kapa düğmesi */
.anahtar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.anahtar input { display: none; }
.anahtar .yol {
    position: relative; width: 58px; height: 32px; flex: 0 0 auto;
    border-radius: 999px; border: 3px solid #fff; background: #5D6475; transition: background 0.18s;
}
.anahtar .yol::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); transition: transform 0.18s cubic-bezier(.3, 1.5, .5, 1);
}
.anahtar input:checked + .yol { background: var(--yesil); }
.anahtar input:checked + .yol::after { transform: translateX(26px); }
.anahtar .yazi { font-family: var(--yazi); font-size: 15px; }

/* kaydırıcı */
input[type=range].kaydirici {
    -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 999px;
    background: linear-gradient(90deg, var(--sari) var(--yuzde, 50%), rgba(255, 255, 255, 0.2) var(--yuzde, 50%));
    border: 2px solid rgba(255, 255, 255, 0.85); outline: none; margin: 10px 0;
}
input[type=range].kaydirici::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; border-radius: 9px; background: var(--sari);
    border: 4px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); cursor: pointer;
}
input[type=range].kaydirici::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 8px; background: var(--sari); border: 4px solid #fff; cursor: pointer;
}

/* sekmeler */
.sekmeler { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.sekme {
    padding: 7px 16px; border-radius: 14px; border: 3px solid rgba(255, 255, 255, 0.7);
    background: rgba(18, 19, 58, 0.55); color: #fff; cursor: pointer;
    font-family: var(--yazi); font-size: 15px; text-shadow: var(--cizgi-ince);
}
.sekme.aktif { background: var(--pembe); border-color: #fff; box-shadow: 0 4px 0 rgba(15, 18, 50, 0.35); }

/* rozetler */
.rozet {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 9px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.9);
    background: var(--gri); color: #fff; font-family: var(--yazi); font-size: 11.5px; letter-spacing: 0.4px;
    white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.rozet--yesil { background: #23A87A; }
.rozet--mor { background: var(--mor-acik); }
.rozet--turuncu { background: var(--turuncu); }
.rozet--sari { background: var(--sari); color: var(--kenar); text-shadow: none; }
.rozet--pembe { background: var(--pembe); }
.rozet--kirmizi { background: var(--kirmizi); }
.rozet--mavi { background: var(--mavi); }
.rozet--camgobegi { background: #1F9FD0; }
.rozet--koyu { background: #2B2E5C; }
.rozet--gri { background: #5D6475; }
.nokta { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--yesil); box-shadow: 0 0 0 2px #fff; flex: 0 0 auto; }
.nokta--sari { background: var(--sari); }
.nokta--kirmizi { background: var(--kirmizi); }
.nokta--gri { background: var(--gri); }
.nokta.nabiz { animation: nabiz 1.6s infinite; }

/* ---------------------------------------------------------------- tablolar */
.tablo-kap { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tablo th {
    position: sticky; top: 0; text-align: left; padding: 8px 10px; white-space: nowrap;
    font-family: var(--yazi); font-weight: normal; font-size: 13px; color: #fff;
    background: rgba(9, 10, 36, 0.9); border-bottom: 3px solid rgba(255, 255, 255, 0.25);
}
.tablo td { padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); vertical-align: middle; }
.tablo tr:hover td { background: rgba(255, 255, 255, 0.05); }
.tablo .eylemler { white-space: nowrap; text-align: right; }
.tablo .eylemler .dugme + .dugme { margin-left: 5px; }
.bos-kutu { padding: 26px; text-align: center; color: var(--soluk); }
.bos-kutu .baslik-yazi { font-size: 18px; color: #fff; margin-bottom: 4px; }
.kod { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }

/* kostüm küçük resmi (sprite) */
.kostum-resmi {
    display: inline-block; vertical-align: middle; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    background-color: #2B86D4; background-image: url("gorseller/kostumler.jpg"); background-repeat: no-repeat;
}
.kostum-resmi--buyuk { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }

/* ---------------------------------------------------------------- oturum kartları */
.oturum-kart > .kart-baslik { padding: 10px 14px; }
.oturum-kod { font-family: var(--yazi); font-size: 24px; letter-spacing: 2px; text-shadow: var(--cizgi); }
.oturum-bilgiler { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 14px; }
.bilgi { background: rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 8px 12px; }
.bilgi .k { font-size: 12px; color: var(--soluk); }
.bilgi .d { font-family: var(--yazi); font-size: 20px; }
.doluluk { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.7); }
.doluluk > span { display: block; height: 100%; background: var(--yesil); border-radius: 999px; transition: width 0.4s; }
.doluluk > span.cok { background: var(--sari); }
.doluluk > span.dolu { background: var(--kirmizi); }
.bot-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.bot-liste .rozet { font-family: var(--govde); font-weight: 600; }

/* ---------------------------------------------------------------- ayarlar */
.ayar-duzen { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.kategori-liste { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 32px); overflow-y: auto; padding-bottom: 8px; }
.kategori-dugme {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px; width: 100%;
    background: rgba(18, 19, 58, 0.72); border: 3px solid rgba(255, 255, 255, 0.55); border-radius: 15px;
    color: #fff; cursor: pointer; text-align: left; font-family: var(--yazi); font-size: 14.5px; text-shadow: var(--cizgi-ince);
}
.kategori-dugme:hover { border-color: #fff; }
.kategori-dugme.aktif { background: var(--sari); color: var(--kenar); border-color: #fff; text-shadow: none; box-shadow: 0 4px 0 rgba(15, 18, 50, 0.35); }
.kategori-dugme .sayi { margin-left: auto; font-size: 12px; opacity: 0.8; }
.kategori-dugme .ikon-kutu { width: 30px; height: 30px; border-width: 2px; border-radius: 9px; }

.ayar-arac { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ayar-arac .arama { flex: 1; min-width: 220px; }
.kategori-aciklama { margin: -4px 0 14px; color: rgba(255, 255, 255, 0.9); }
.grup-baslik { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-family: var(--yazi); font-size: 19px; text-shadow: var(--cizgi-ince); }
.grup-baslik::after { content: ""; flex: 1; order: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); }
.grup-baslik--kategori { font-size: 23px; margin-top: 26px; }
.grup-dugme { width: 100%; background: none; border: none; color: inherit; cursor: pointer; padding: 4px 0; text-align: left; }
.grup-dugme:hover .ok { background: rgba(255, 255, 255, 0.18); }
.grup-dugme .ok { width: 26px; height: 26px; padding: 3px; flex: 0 0 auto; border-radius: 8px; transition: transform 0.2s, background 0.2s; transform: rotate(90deg); }
.grup-dugme.kapali .ok { transform: none; }
.grup-dugme .grup-sayi { order: 2; font-family: var(--govde); font-size: 12.5px; font-weight: 600; text-shadow: none; color: var(--soluk); white-space: nowrap; }
.grup-dugme .grup-sayi.vurgulu { color: var(--sari); }
.grup-dugme.kapali { margin-bottom: 4px; }

.ayar {
    position: relative; margin-bottom: 12px; padding: 14px 16px 14px;
    background: rgba(24, 26, 64, 0.9); border: 4px solid rgba(255, 255, 255, 0.85); border-radius: 20px;
    box-shadow: 0 5px 0 rgba(15, 18, 50, 0.28); transition: border-color 0.2s, transform 0.2s;
}
.ayar.bekliyor { border-color: var(--sari); box-shadow: 0 5px 0 rgba(15, 18, 50, 0.28), 0 0 0 4px rgba(255, 197, 46, 0.35); }
.ayar.vurgu { animation: vurgu 1.2s ease-out; }
.ayar-ust { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ayar-ad { font-family: var(--yazi); font-size: 18px; text-shadow: var(--cizgi-ince); margin-right: 4px; }
.ayar-rozetler { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 2px; }
.ayar-aciklama { margin: 8px 0 12px; color: #D9E2FF; font-size: 14.5px; max-width: 900px; }
.ayar-uyari { margin: -4px 0 12px; padding: 7px 12px; border-radius: 12px; background: rgba(255, 138, 43, 0.22); border: 2px solid var(--turuncu); font-size: 13.5px; }
.ayar-kontrol { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ayar-kontrol .kaydirici-kap { flex: 1; min-width: 200px; max-width: 520px; }
.ayar-kontrol .alan--sayi { width: 120px; text-align: center; font-family: var(--yazi); font-size: 17px; }
.birim { font-family: var(--yazi); font-size: 14px; color: var(--soluk); }
.ayar-alt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--soluk); }
.ayar-alt .varsayilan b { color: #fff; font-weight: 600; }
.ayar-kimlik { margin-left: auto; opacity: 0.55; }
.sinir-yazi { display: flex; justify-content: space-between; font-size: 12px; color: var(--soluk); margin-top: -4px; }

.vektor { display: flex; gap: 8px; }
.vektor label { display: flex; align-items: center; gap: 4px; font-family: var(--yazi); }
.vektor .alan { width: 92px; text-align: center; }
.renk-kap { display: flex; align-items: center; gap: 10px; }
.renk-kap input[type=color] { width: 56px; height: 40px; border: 3px solid #fff; border-radius: 12px; padding: 0; background: none; cursor: pointer; }

.sirali-liste { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.sirali-oge {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(255, 255, 255, 0.25);
}
.sirali-oge.kapali { opacity: 0.5; }
.sirali-oge .sira { width: 30px; height: 30px; border-radius: 9px; background: var(--mor-acik); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-family: var(--yazi); }
.sirali-oge .ad { flex: 1; font-family: var(--yazi); }
.sirali-oge .level { font-size: 12px; color: var(--soluk); }

.etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.etiket-kutu {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px;
    background: var(--kirmizi); border: 2px solid #fff; font-weight: 600; font-size: 13px;
}
.etiket-kutu button { border: none; background: rgba(0, 0, 0, 0.25); color: #fff; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1; padding: 0; }

.kostum-tablo td .alan { width: 96px; padding: 5px 8px; text-align: center; }
.kostum-tablo tr.degisti td { background: rgba(255, 197, 46, 0.12); }
.kostum-filtre { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* kaydet çubuğu */
.kaydet-cubugu {
    position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%);
    z-index: 30; width: min(880px, calc(100% - 32px));
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; background: var(--pembe); border: 5px solid #fff; border-radius: 22px;
    box-shadow: 0 8px 0 rgba(15, 18, 50, 0.4);
    visibility: hidden; transition: transform 0.3s cubic-bezier(.2, 1.3, .4, 1), visibility 0s linear 0.3s;
}
.kaydet-cubugu.acik { transform: translate(-50%, 0); visibility: visible; transition: transform 0.3s cubic-bezier(.2, 1.3, .4, 1), visibility 0s; }
.kaydet-cubugu .sayi { font-family: var(--yazi); font-size: 20px; text-shadow: var(--cizgi); }
.kaydet-cubugu .alan { flex: 1; min-width: 180px; }

/* ---------------------------------------------------------------- olaylar */
.olay-liste { display: flex; flex-direction: column; }
.olay { display: flex; gap: 12px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.olay:last-child { border-bottom: none; }
.olay .zaman { flex: 0 0 auto; min-width: 74px; color: var(--soluk); font-size: 12.5px; padding-top: 2px; }
.olay .ikon-kutu { width: 28px; height: 28px; border-width: 2px; border-radius: 9px; }
.olay .ikon-kutu svg { width: 15px; height: 15px; }
.olay .metin { flex: 1; min-width: 0; word-break: break-word; }
.olay .kim { font-size: 12px; color: var(--soluk); }

.kayit-gorunum {
    margin: 0; padding: 12px; max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-all;
    background: rgba(5, 6, 22, 0.85); border-radius: 14px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.5;
}
.kayit-gorunum .hata { color: #FF8C9A; }
.kayit-gorunum .uyari { color: #FFD66B; }

/* ---------------------------------------------------------------- grafikler */
.grafik-kap { width: 100%; }
.grafik { width: 100%; height: auto; display: block; overflow: visible; }
.grafik .izgara-cizgi { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.grafik .eksen-yazi { fill: var(--soluk); font-size: 11px; font-family: var(--govde); }
.grafik .cizgi { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.grafik .alan-dolgu { opacity: 0.18; }
.grafik .cubuk { rx: 5; }
.grafik-aciklama { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-top: 6px; }
.grafik-aciklama span { display: inline-flex; align-items: center; gap: 6px; }
.grafik-aciklama i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid #fff; display: inline-block; }
.grafik-ipucu {
    position: fixed; z-index: 50; pointer-events: none; padding: 6px 10px; border-radius: 10px;
    background: var(--kenar); border: 3px solid #fff; font-size: 13px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}

.cubuk-gosterge { height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.8); overflow: hidden; }
.cubuk-gosterge > span { display: block; height: 100%; background: var(--camgobegi); }
.cubuk-gosterge > span.yuksek { background: var(--turuncu); }
.cubuk-gosterge > span.kritik { background: var(--kirmizi); }

/* ---------------------------------------------------------------- uyarı şeridi */
.serit {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px;
    border-radius: 20px; border: 5px solid #fff; background: var(--kirmizi); box-shadow: 0 6px 0 rgba(15, 18, 50, 0.3);
}
.serit .baslik-yazi { font-size: 18px; text-shadow: var(--cizgi-ince); }
.serit--sari { background: var(--sari); color: var(--kenar); }
.serit--mor { background: var(--mor-acik); }
.serit .bosluk { flex: 1; }

/* ---------------------------------------------------------------- pencere (modal) */
.pencere-arka {
    position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 18px;
    background: rgba(10, 12, 40, 0.62); animation: sol 0.15s ease-out;
}
.pencere {
    width: min(620px, 100%); max-height: calc(100vh - 36px); overflow: auto;
    background: var(--mavi); border: 7px solid #fff; border-radius: 28px; box-shadow: 0 10px 0 rgba(15, 18, 50, 0.4);
    animation: buyu 0.25s cubic-bezier(.2, 1.4, .4, 1);
}
.pencere--genis { width: min(980px, 100%); }
.pencere-baslik { padding: 18px 22px 4px; font-family: var(--yazi); font-size: 26px; text-align: center; text-shadow: var(--cizgi); }
.pencere-govde { padding: 10px 22px 6px; }
.pencere-govde p { margin: 6px 0 12px; }
.pencere-dugmeler { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 12px 22px 22px; }
.secenek {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
    background: rgba(9, 10, 36, 0.4); border: 3px solid rgba(255, 255, 255, 0.5); border-radius: 16px;
}
.secenek:hover { border-color: #fff; }
.secenek.secili { border-color: var(--sari); background: rgba(255, 197, 46, 0.16); }
.secenek input { margin-top: 4px; accent-color: var(--sari); width: 18px; height: 18px; }
.secenek .baslik-yazi { font-size: 17px; }

/* ---------------------------------------------------------------- bildirimler */
.bildirimler { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100% - 36px)); }
.bildirim {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; border: 4px solid #fff;
    background: var(--yesil); box-shadow: 0 6px 0 rgba(15, 18, 50, 0.4); animation: kay 0.3s cubic-bezier(.2, 1.3, .4, 1);
    font-weight: 600; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.bildirim--hata { background: var(--kirmizi); }
.bildirim--bilgi { background: var(--mavi); }
.bildirim.cikiyor { animation: kaybol 0.3s forwards; }

/* ---------------------------------------------------------------- animasyonlar */
@keyframes buyu { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sol { from { opacity: 0; } to { opacity: 1; } }
@keyframes kay { from { transform: translateX(120%); } to { transform: translateX(0); } }
@keyframes kaybol { to { transform: translateX(120%); opacity: 0; } }
@keyframes nabiz { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(75, 211, 75, 0.6); } 70% { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(75, 211, 75, 0); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(75, 211, 75, 0); } }
@keyframes vurgu { 0% { box-shadow: 0 0 0 8px rgba(255, 197, 46, 0.7); } 100% { box-shadow: 0 5px 0 rgba(15, 18, 50, 0.28); } }
@keyframes don { to { transform: rotate(360deg); } }
.yukleniyor { display: inline-block; width: 22px; height: 22px; border-radius: 7px; border: 4px solid #fff; border-top-color: var(--sari); animation: don 0.8s linear infinite; }

/* ---------------------------------------------------------------- dar ekran */
@media (max-width: 1100px) {
    .izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ayar-duzen { grid-template-columns: 1fr; }
    .kategori-liste { position: static; flex-direction: row; overflow-x: auto; max-height: none; }
    .kategori-dugme { width: auto; flex: 0 0 auto; }
}
@media (max-width: 860px) {
    .uygulama { flex-direction: column; }
    .yan { position: sticky; z-index: 20; width: 100%; height: auto; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border-right: none; border-bottom: 4px solid #fff; overflow-x: auto; }
    .yan .logo { display: none; }
    .menu { flex-direction: row; }
    .menu-dugme { width: auto; white-space: nowrap; }
    .menu-dugme .etiket { display: none; }
    .yan-alt { margin: 0 0 0 auto; padding: 0; display: flex; gap: 6px; }
    .kullanici-kutu { display: none; }
    .icerik { padding: 16px 12px 120px; }
    .izgara-2, .izgara-3 { grid-template-columns: 1fr; }
    h1 { font-size: 26px; }
}

/* sohbet kaydı */
.sohbet-metin { max-width: 460px; white-space: normal; word-break: break-word; }