/* ===================================================================
   Alerttik uyelik, hesap ve yonetim sayfalarinin ortak gorunumu
   Tema: neredeyse siyah zemin + kirmizi vurgu
   Degisken adlari korundu, degerleri markaya gore guncellendi.
   =================================================================== */

:root {
    --zemin:      #08090b;
    --yuzey:      #111317;
    --yuzeyUst:   #181b20;
    --cizgi:      #23272e;
    --cizgiAcik:  #343a43;
    --metin:      #e9edf2;
    --sonuk:      #929aa5;
    --parlak:     #ffffff;
    --isik:       rgba(255,255,255,.06);
    /* Marka kirmizisi (eski "altin" vurgunun yerini aldi) */
    --altin:      #ff3040;
    --marka:      #ff2a3c;
    --markaKoyu:  #d2101f;
    --markaIsik:  rgba(255,42,60,.14);
    --yesil:      #57d98a;
    --kirmizi:    #ff7b86;
    --mavi:       #7fb6e6;
    --pembe:      #ff2a3c;
    --yanGenislik: 248px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }

/* Windows'ta acilir listeler (select) sistem temasiyla beyaz ciziliyordu; okunmuyordu.
   Secenekleri acikca koyu renkle boyuyoruz. */
select, option, optgroup { color-scheme: dark; }
select option, select optgroup {
    background-color: #15151a;
    color: #f2f2f5;
}
select option:checked, select option:hover {
    background-color: #24242c;
    color: #fff;
}

body {
    margin: 0; min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 60% -240px, rgba(255,42,60,.10) 0%, transparent 70%),
        var(--zemin);
    color: var(--metin);
    font-family: "Segoe UI", system-ui, Arial, sans-serif;
    font-size: 14.5px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.pencereAcik { overflow: hidden; }

a { color: var(--parlak); }
h1, h2, h3, h4 { margin: 0; font-weight: 650; color: var(--parlak); }
p { margin: 0 0 12px; }

.gizli { display: none !important; }
.sonuk { color: var(--sonuk); }
.kucuk { font-size: 12.5px; }
.tek { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; }
.sag { text-align: right; }
.altinYazi { color: var(--altin); }
.kirmiziYazi { color: var(--kirmizi); }
.yesilYazi { color: var(--yesil); }

/* ---------------- Dugmeler ---------------- */
button, .dugme {
    font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.4;
    padding: 9px 17px; border-radius: 6px; cursor: pointer;
    color: var(--metin); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid #3a424a;
    background: linear-gradient(180deg, #1d2127 0%, #141720 100%);
    box-shadow: inset 0 1px 0 var(--isik), 0 1px 2px rgba(0,0,0,.45);
    transition: background .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
}
button:hover, .dugme:hover { background: linear-gradient(180deg, #262b33 0%, #1a1e26 100%); border-color: var(--cizgiAcik); }
button:focus-visible, .dugme:focus-visible { outline: 2px solid #ff5a68; outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }
button:disabled:hover { background: linear-gradient(180deg, #1d2127 0%, #141720 100%); border-color: #3a424a; }

.ana {
    color: #ffffff !important; font-weight: 650; border-color: #ff3a4b;
    background: linear-gradient(180deg, #ff3a4b 0%, #e4172a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px rgba(255,42,60,.26);
}
.ana:hover { background: linear-gradient(180deg, #ff5260 0%, #f01f32 100%); }
.ana:disabled:hover { background: linear-gradient(180deg, #ff3a4b 0%, #e4172a 100%); border-color: #ff3a4b; }

.vurgu {
    color: #fff; font-weight: 650; border-color: #ff5060;
    background: linear-gradient(180deg, #ff5060 0%, #d2101f 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px rgba(255, 42, 60,.25);
}
.vurgu:hover { background: linear-gradient(180deg, #ff6b78 0%, #e01828 100%); border-color: #ff6b78; }

.tehlike { color: #f0b4b4; }
.tehlike:hover { border-color: #7a4a4a; }
.tehlike.dolu { color: #fff; border-color: #a54848; background: linear-gradient(180deg, #b85353 0%, #8e3b3b 100%); }

.mini { padding: 5px 12px; font-size: 12.5px; }
.genis { width: 100%; }

/* ---------------- Formlar ---------------- */
.alan { display: block; min-width: 0; }
.alan > span { display: block; font-size: 12.5px; color: var(--sonuk); margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="search"], select, textarea {
    width: 100%; padding: 9px 11px; border-radius: 6px;
    color: var(--metin); font-family: inherit; font-size: 14px;
    border: 1px solid #363e45;
    background: linear-gradient(180deg, #0c0e11 0%, #191e22 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #66717a; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: #ff5a68;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 3px rgba(255,90,104,.18);
}
input:disabled, select:disabled, textarea:disabled { opacity: .5; }
input[type="checkbox"], input[type="radio"] { accent-color: #cfd8e0; width: 16px; height: 16px; margin: 0; flex: none; }

.onay { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; color: var(--metin); }
.izgaraForm { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.formDikey { display: grid; gap: 14px; }
.tamGenislik { grid-column: 1 / -1; margin-top: 14px; }
.satirIc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.satirIc input[type="date"] { flex: 1 1 150px; width: auto; }
.hizli { margin-top: 8px; }

.formHata {
    margin-top: 14px; padding: 10px 13px; border-radius: 8px; font-size: 13.5px;
    color: #f2c0c0; border: 1px solid #5e3f3f; background: rgba(160,70,70,.12);
}
.formHata a { color: #fff; }
.uyari {
    margin-top: 14px; padding: 10px 13px; border-radius: 8px; font-size: 13.5px;
    color: #ffd7da; border: 1px solid rgba(255, 48, 64,.35); background: rgba(255, 48, 64,.07);
}

/* ---------------- Kutular ---------------- */
.kutu {
    border-radius: 11px; border: 1px solid var(--cizgi); padding: 20px 22px;
    background: linear-gradient(180deg, var(--yuzeyUst) 0%, var(--yuzey) 130px);
    box-shadow: inset 0 1px 0 var(--isik), 0 5px 18px rgba(0,0,0,.34);
    min-width: 0;
}
.kutu + .kutu { margin-top: 18px; }
.kutu h3 { font-size: 15.5px; }
.kutuAlt { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #262c32; }
.baslikSatir { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dugmeSira { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dugmeSira.sol { justify-content: flex-start; }
.araBaslik { font-size: 14px; margin: 22px 0 6px; }
.izgara2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: 18px; }
.izgara2 > .kutu + .kutu { margin-top: 0; }

.duyuru {
    border: 1px solid rgba(255, 48, 64,.35); background: rgba(255, 48, 64,.07);
    color: #ffd7da; padding: 12px 16px; border-radius: 10px; margin-bottom: 22px; white-space: pre-line;
}
.duyuru.yesil { border-color: rgba(143,214,164,.35); background: rgba(143,214,164,.07); color: #cdeed6; }
.duyuru.kirmizi { border-color: #5e3f3f; background: rgba(160,70,70,.12); color: #f2c0c0; }

.bosDurum { padding: 34px 20px; text-align: center; color: var(--sonuk); }

/* ---------------- Uygulama kabugu ---------------- */
.yan {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--yanGenislik);
    display: flex; flex-direction: column;
    padding: 22px 14px 18px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
        linear-gradient(180deg, #262c32 0%, #1a1e23 46%, #16191d 100%);
    border-right: 1px solid #0a0c0e;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.05), 4px 0 20px rgba(0,0,0,.4);
    z-index: 10; overflow-y: auto;
}
/* Gezinme ustte oldugu icin icerik tam genislikte baslar; eski
   "margin-left: var(--yanGenislik)" kaldirildi (bkz. ustmenu.css) */
.icerik { margin: 0 auto; padding: 30px 34px 80px; max-width: calc(1260px + var(--yanGenislik)); min-width: 0; }

.marka {
    display: flex; align-items: center; gap: 11px; text-decoration: none;
    padding: 4px 10px 20px; border-bottom: 1px solid var(--cizgi); margin-bottom: 10px;
}
.markaIsaret {
    width: 36px; height: 36px; flex: none; border-radius: 10px; overflow: hidden; background: #11161b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 8px rgba(0,0,0,.55);
}
.markaIsaret img { width: 100%; height: 100%; object-fit: cover; display: block; }
.markaAd {
    font-size: 19px; font-weight: 750; letter-spacing: -.2px; line-height: 1.1;
    background: linear-gradient(180deg, #ffffff 0%, #a9b4bd 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.markaAlt { font-size: 11px; color: var(--sonuk); letter-spacing: .4px; }

.menuBaslik { font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: #5d666e; padding: 14px 12px 7px; }
.menuOge {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; margin-bottom: 3px;
    border-radius: 7px; border: 1px solid transparent;
    color: var(--sonuk); font-size: 14px; text-decoration: none;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.menuOge:hover { background: rgba(255,255,255,.04); color: var(--metin); }
.menuOge.secili {
    color: #ffffff; border-color: #4a545d;
    background: linear-gradient(180deg, #3a434b 0%, #2a3037 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 6px rgba(0,0,0,.4);
}
.menuOge svg { flex: none; width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menuRozet {
    margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 20px; text-align: center;
    font-size: 11.5px; font-weight: 700; color: #ffffff; background: var(--altin);
}
.menuRozet:empty { display: none; }

.yanAlt { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--cizgi); }
.uyeAd { font-size: 13.5px; color: var(--parlak); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uyeEposta { font-size: 12px; color: var(--sonuk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px; }
.yanAlt .dugmeSira { margin-top: 12px; }

.bolum { display: none; }
.bolum.acik { display: block; }
.sayfaBaslik { font-size: 22px; margin: 0 0 4px; }
.sayfaAlt { margin: 0 0 22px; color: var(--sonuk); font-size: 13.5px; }
.sayfaUst { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sayfaUst .sayfaAlt { margin-bottom: 0; }

/* ---------------- Istatistik kartlari ---------------- */
.istatistikler { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 18px; }
.istatistik {
    border-radius: 11px; border: 1px solid var(--cizgi); padding: 16px 18px;
    background: linear-gradient(180deg, var(--yuzeyUst) 0%, var(--yuzey) 110px);
    box-shadow: inset 0 1px 0 var(--isik), 0 5px 18px rgba(0,0,0,.3);
}
.istatistik .etiket { font-size: 12px; color: var(--sonuk); }
.istatistik .deger { font-size: 25px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.3; margin-top: 2px; }
.istatistik .not { font-size: 12px; color: #737e87; margin-top: 3px; }
.istatistik .not a { color: var(--altin); text-decoration: none; }

/* ---------------- Tablolar ---------------- */
.tabloKap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey); }
.tablo { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.tablo th {
    text-align: left; font-size: 12px; font-weight: 600; color: var(--parlak); white-space: nowrap;
    padding: 11px 14px; border-bottom: 1px solid #0f1316;
    background: linear-gradient(180deg, #333b43 0%, #272d34 55%, #222830 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
}
.tablo td { padding: 11px 14px; border-bottom: 1px solid #232930; vertical-align: middle; font-size: 13.5px; }
.tablo tbody tr:last-child td { border-bottom: none; }
.tablo tbody tr:hover td { background: rgba(255,255,255,.022); }
.tablo tr.tiklanir { cursor: pointer; }
.tablo td.sag, .tablo td.sonuk { white-space: nowrap; }
.tablo td.sag > * + * { margin-left: 6px; }
.hucreAna { color: var(--parlak); font-weight: 600; }
.kutu .tabloKap { border: none; border-radius: 0; background: transparent; margin: 0 -22px -20px; }
.kutu .tablo { min-width: 0; }

.araclar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.araclar input[type="search"] { flex: 1 1 240px; max-width: 340px; }
.araclar select { width: auto; min-width: 150px; }
.araclar .sagaYasla { margin-left: auto; }
.filtreler { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--cizgi); border-radius: 9px; background: #12161a; flex-wrap: wrap; }
.filtreler button { border: none; box-shadow: none; background: none; padding: 6px 13px; border-radius: 6px; color: var(--sonuk); }
.filtreler button.secili { background: linear-gradient(180deg, #3a434b 0%, #2a3037 100%); color: #fff; }

.sayfalama { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; color: var(--sonuk); font-size: 13px; min-height: 30px; }
.sayfalama span { margin-right: auto; }

/* ---------------- Rozetler ---------------- */
.rozet {
    display: inline-block; padding: 1px 10px; border-radius: 20px; white-space: nowrap;
    font-size: 11.5px; color: var(--sonuk); border: 1px solid #3c444c; line-height: 1.6;
    background: linear-gradient(180deg, #2c3339 0%, #232930 100%);
}
.rozet.yesil { color: var(--yesil); border-color: #3f5e47; }
.rozet.kirmizi { color: var(--kirmizi); border-color: #5e3f3f; }
.rozet.altin { color: var(--altin); border-color: rgba(255, 48, 64,.4); }
.rozet.mavi { color: var(--mavi); border-color: #3e5566; }
.rozetler { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------- Kullanim cubuklari ---------------- */
.kullanimSatir + .kullanimSatir { margin-top: 14px; }
.kullanimUst { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 6px; }
.kullanimUst span:first-child { color: var(--sonuk); }
.cubuk { height: 8px; border-radius: 6px; overflow: hidden; background: #111519; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.cubuk > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #8f9ba5, #eef3f7); transition: width .4s; }
.cubuk.dolu > i { background: linear-gradient(90deg, #b76262, #f0b0b0); }
.cubuk.sinirsiz > i { background: repeating-linear-gradient(135deg, #3a4249 0 6px, #2c3238 6px 12px); }

.ozellikIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; }
.ozellik { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--metin); }
.ozellik svg { width: 15px; height: 15px; flex: none; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke: var(--yesil); }
.ozellik.kapali { color: #5f6871; }
.ozellik.kapali svg { stroke: #5f6871; stroke-width: 1.8; }

/* ---------------- Pencereler ---------------- */
.perde {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(6,8,10,.66); backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 18px; overflow-y: auto;
}
.pencere {
    width: 100%; max-width: 520px; border-radius: 12px; border: 1px solid #525d67;
    background: linear-gradient(180deg, #2c333a 0%, #22282e 90px, #1d2227 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 60px rgba(0,0,0,.68);
    animation: pencereGel .16s ease-out;
}
.pencere.genis { max-width: 880px; }
@keyframes pencereGel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pencereBaslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #333b42; }
.pencereBaslik h3 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pencereGovde { padding: 20px; }
.pencereGovde > p:last-child { margin-bottom: 0; }
.pencereAlt { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid #333b42; }
.kapat { background: none !important; border: none !important; box-shadow: none !important; font-size: 22px; line-height: 1; padding: 2px 8px; color: var(--sonuk); }
.kapat:hover { color: #fff; }
.sorMetin { color: var(--metin); }

/* ---------------- Sekmeler ---------------- */
.sekmeler { display: flex; gap: 2px; border-bottom: 1px solid var(--cizgi); margin: -4px 0 18px; flex-wrap: wrap; }
.sekme {
    background: none !important; border: none !important; box-shadow: none !important; border-radius: 0;
    padding: 9px 13px; color: var(--sonuk); border-bottom: 2px solid transparent !important; margin-bottom: -1px;
}
.sekme:hover { color: var(--metin); }
.sekme.secili { color: #fff; border-bottom-color: var(--parlak) !important; }

/* ---------------- Bildirim ---------------- */
#bildirim {
    position: fixed; right: 24px; bottom: 24px; z-index: 90; max-width: min(420px, calc(100vw - 48px));
    padding: 11px 18px; border-radius: 8px; color: var(--parlak);
    border: 1px solid var(--cizgiAcik);
    background: linear-gradient(180deg, #23272e 0%, #1f2429 100%);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
#bildirim.gorunur { opacity: 1; transform: none; }
#bildirim.hata { color: #f2c0c0; border-color: #6e4545; }

/* ---------------- Paket kartlari ---------------- */
.donemSecici { display: inline-flex; border: 1px solid var(--cizgi); border-radius: 30px; padding: 4px; background: #12161a; }
.donemSecici button { border: none; box-shadow: none; background: none; border-radius: 30px; padding: 7px 18px; color: var(--sonuk); }
.donemSecici button.secili { background: linear-gradient(180deg, #3a434b 0%, #2a3037 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.donemSecici em { font-style: normal; font-size: 11px; color: var(--yesil); margin-left: 4px; }

.paketler { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); align-items: stretch; }
.paketKart {
    position: relative; display: flex; flex-direction: column;
    padding: 28px 24px 24px; border-radius: 14px; border: 1px solid var(--cizgi);
    background: linear-gradient(180deg, #252b31 0%, var(--yuzey) 160px);
    box-shadow: inset 0 1px 0 var(--isik), 0 8px 24px rgba(0,0,0,.35);
}
.paketKart.vurgulu {
    border-color: rgba(255, 48, 64,.55);
    background: linear-gradient(180deg, #2d2b25 0%, #1d1f21 180px);
    box-shadow: 0 0 0 1px rgba(255, 48, 64,.18), 0 18px 40px rgba(0,0,0,.45);
}
.paketKart.mevcut { border-color: #6f8394; }
.paketKart .serit {
    position: absolute; top: -11px; left: 22px; padding: 1px 12px; border-radius: 20px;
    font-size: 11.5px; font-weight: 650; color: #1b1710; background: var(--altin);
}
.paketKart.mevcut .serit { background: #b9c7d2; color: #ffffff; }
.paketKart h3 { font-size: 19px; color: #fff; }
.paketAciklama { color: var(--sonuk); font-size: 13.5px; min-height: 42px; margin: 4px 0 0; }
.fiyat { font-size: 32px; font-weight: 750; color: #fff; margin: 16px 0 0; letter-spacing: -.5px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fiyat small { font-size: 14px; color: var(--sonuk); font-weight: 500; letter-spacing: 0; margin-left: 3px; }
.fiyatAlt { font-size: 12.5px; color: var(--sonuk); min-height: 20px; margin-bottom: 18px; }
.fiyatAlt em { font-style: normal; color: var(--yesil); }
.paketKart ul { list-style: none; padding: 0; margin: 20px 0 12px; flex: 1; }
.paketKart li { position: relative; padding: 4px 0 4px 26px; font-size: 14px; }
.paketKart li::before {
    content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd6a4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.paketKart > button, .paketKart > .dugme { width: 100%; padding: 11px 16px; }
.limitDetay { margin-top: 4px; font-size: 13px; }
.limitDetay summary { cursor: pointer; color: var(--sonuk); padding: 6px 0; }
.limitDetay summary:hover { color: var(--metin); }
.limitTablo { display: grid; gap: 4px; padding: 6px 0 2px; }
.limitTablo div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #2a3036; padding: 3px 0; }
.limitTablo div span { color: var(--sonuk); }
.limitTablo b { font-weight: 600; color: var(--parlak); text-align: right; }

/* ---------------- Odeme ---------------- */
.siparisOzet { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--cizgi); background: #161a1e; }
.siparisOzet .tutar { font-size: 20px; color: #fff; }
.yontemler { display: grid; gap: 8px; }
.yontem { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--cizgi); background: #161a1e; cursor: pointer; }
.yontem:has(input:checked) { border-color: #ff5a68; background: #1b2126; }
.yontem input { margin-top: 3px; }
.yontem b { display: block; font-weight: 600; }
.yontem small { display: block; color: var(--sonuk); font-size: 12.5px; }
.pencereGovde .alan { margin-top: 14px; }
.bilgiListe { border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; margin: 14px 0; }
.bilgiSatir { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #262c32; }
.bilgiSatir:last-child { border-bottom: none; }
.bilgiSatir > span { width: 90px; flex: none; font-size: 13px; }
.bilgiSatir > b { flex: 1; font-weight: 600; word-break: break-all; }
.odemeCerceve { width: 100%; height: min(680px, 72vh); border: none; border-radius: 8px; background: #fff; display: block; }

/* ---------------- Kilit sayfasi ---------------- */
body.ortala { display: flex; align-items: center; justify-content: center; padding: 24px; }
.kilitKutu { max-width: 470px; text-align: center; padding: 34px 32px; }
.kilitIkon {
    width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: #232a30; border: 1px solid var(--cizgiAcik);
}
.kilitIkon svg { width: 26px; height: 26px; stroke: var(--altin); fill: none; stroke-width: 1.8; }
.kilitKutu h1 { font-size: 20px; margin-bottom: 8px; }
.kilitKutu p { color: var(--sonuk); margin: 0 0 22px; }

/* ---------------- Yayinci vitrini ---------------- */
[data-vitrin]:not(.vitrinDolu) { display: none; }

.vitrinKart {
    position: relative; overflow: hidden; border-radius: 20px; padding: 18px 0 16px;
    border: 1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(420px 170px at 100% 0%, rgba(255, 42, 60,.11), transparent 65%),
        radial-gradient(380px 170px at 0% 100%, rgba(255, 48, 64,.07), transparent 70%),
        linear-gradient(180deg, #1b2025 0%, #0c0e11 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 40px rgba(0,0,0,.45);
}
.vitrinBaslik {
    text-align: center; padding: 0 18px; margin-bottom: 14px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px;
    color: rgba(255,255,255,.42);
}
.vitrinPencere { display: flex; justify-content: center; overflow: hidden; }
.vitrinPencere.kayan {
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.vitrinSerit { display: flex; padding: 6px 0 4px; }
.vitrinPencere.kayan .vitrinSerit { width: max-content; animation: vitrinKay var(--sure, 30s) linear infinite; }
.vitrinPencere.kayan:hover .vitrinSerit { animation-play-state: paused; }
@keyframes vitrinKay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.vitrinOge {
    flex: none; width: 108px; margin: 0 10px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    text-decoration: none; color: inherit;
}
.vitrinFoto {
    position: relative; width: 50px; height: 50px; border-radius: 50%; padding: 2px;
    background: conic-gradient(from 210deg, var(--renk), rgba(255,255,255,.08) 55%, var(--renk));
    box-shadow: 0 0 18px color-mix(in srgb, var(--renk) 30%, transparent);
    transition: transform .2s ease;
}
.vitrinFoto img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
    background: #0e1114; border: 2px solid #15191d;
}
.vitrinFoto.bos::after {
    content: attr(data-harf); position: absolute; inset: 2px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #1f252b; border: 2px solid #15191d; font-weight: 700; font-size: 18px; color: #dfe6ec;
}
.vitrinOge:hover .vitrinFoto { transform: translateY(-2px) scale(1.06); }
.vitrinOge:focus-visible { outline: 2px solid #ff5a68; outline-offset: 3px; border-radius: 10px; }
.vitrinCanli {
    position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .6px; line-height: 13px;
    padding: 0 5px; border-radius: 4px; color: #fff; background: #ff2a3c;
    box-shadow: 0 0 0 2px #15191d;
}
.vitrinAd {
    max-width: 100%; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11.5px; color: rgba(255,255,255,.55);
}
.vitrinSayi { margin-top: -3px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .vitrinPencere.kayan { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .vitrinPencere.kayan .vitrinSerit { animation: none; }
}

/* ---------------- Ajanslar ---------------- */
.ajansBolum {
    border-radius: 22px; overflow: hidden;
    border: 1px solid rgba(255, 42, 60,.3);
    background:
        radial-gradient(760px 280px at 0% 0%, rgba(255, 42, 60,.08), transparent 60%),
        radial-gradient(560px 240px at 100% 100%, rgba(255, 48, 64,.05), transparent 65%),
        linear-gradient(180deg, #181c20 0%, #121518 100%);
    box-shadow: 0 22px 54px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.ajansUst { padding: 28px 30px 6px; }
.ajansUst h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 30px; color: #fff; letter-spacing: -.5px; }
.yeniRozet {
    font-size: 11px; font-weight: 800; letter-spacing: .6px; line-height: 1.7;
    padding: 1px 9px; border-radius: 20px; color: #fff; background: #ff2a3c;
    box-shadow: 0 0 0 3px rgba(255, 42, 60,.18);
}
.ajansUst p { margin: 8px 0 0; font-size: 14.5px; color: #c3ccd4; max-width: 80ch; }

.ajansIzgara { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; padding: 20px 30px 26px; align-items: start; }
.ajansOne { display: flex; flex-direction: column; gap: 14px; }
.ajansAfis {
    display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 18px 24px;
    border-radius: 16px; border: 1px solid rgba(255,255,255,.06);
    background: radial-gradient(420px 120px at 50% 130%, rgba(255,255,255,.08), transparent 70%), #0c0f12;
}
.ajansAfis img { display: block; max-width: 100%; max-height: 64px; object-fit: contain; }

.ajansKart {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 24px 22px 22px; border-radius: 16px;
    background: #15181d; border: 1px solid rgba(255,255,255,.07);
}
.ajansKart > .dugme { margin-top: 18px; }
.ajansLogo {
    flex: none; width: 70px; height: 70px; border-radius: 18px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 30%, #20262c, #0c0f12); border: 1px solid rgba(255,255,255,.09);
}
.ajansLogo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; display: block; }
.ajansLogo.bos { font-size: 24px; font-weight: 800; color: #dfe6ec; }
.ajansAd { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 14px 0 6px; font-size: 20px; font-weight: 750; color: #fff; }
.onayRozeti { width: 18px; height: 18px; flex: none; }
.partnerRozeti {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; line-height: 1.7;
    padding: 0 8px; border-radius: 20px; color: #bfe8cd; background: rgba(61,220,132,.1); border: 1px solid rgba(61,220,132,.3);
}
.ajansKisa {
    margin: 0; max-width: 48ch; font-size: 14px; color: var(--sonuk);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ajansIstatistik {
    width: 100%; margin-top: 18px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; text-align: left;
}
.ajansIstatistik > div { padding: 10px 14px; }
.ajansIstatistik > div + div { border-left: 1px solid rgba(255,255,255,.1); }
.ajansIstatistik span { display: block; font-size: 12px; color: var(--sonuk); }
.ajansIstatistik b { display: block; margin-top: 4px; font-size: 17px; color: #fff; }
.avatarYigin { display: flex; margin-top: 6px; }
.avatarYigin span {
    width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; border: 2px solid #15181d;
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff;
    background: #3a434b center / cover no-repeat;
}
.avatarYigin span:first-child { margin-left: 0; }
.avatarYigin span.fazla { width: auto; min-width: 24px; padding: 0 6px; border-radius: 12px; background: #2c3339; color: #cfd8e0; font-size: 10.5px; }

.ajansListe { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.ajansSatir {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px;
    background: #15181d; border: 1px solid rgba(255,255,255,.06); color: inherit; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.ajansSatir:hover { background: #20252a; border-color: rgba(255,255,255,.15); }
.ajansSatir .ajansLogo { width: 46px; height: 46px; border-radius: 12px; }
.ajansSatir .ajansLogo img { padding: 6px; }
.ajansSatirMetin { flex: 1; min-width: 0; }
.ajansSatirAd { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; }
.ajansSatirMetin p { margin: 3px 0 0; font-size: 13px; color: var(--sonuk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajansSatirMetin .avatarYigin span { border-color: #15181d; }
.ajansOk { color: var(--sonuk); font-size: 22px; line-height: 1; }
/* Liste kisa kaldiginda sag sutunun kalanini doldurur */
.ajansDavet {
    flex: 1; min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 22px 24px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.14);
    background: radial-gradient(360px 160px at 100% 0%, rgba(255, 42, 60,.06), transparent 70%), rgba(255,255,255,.015);
}
.ajansDavet b { display: block; color: #fff; font-size: 15px; }
.ajansDavet p { margin: 6px 0 12px; font-size: 13.5px; color: var(--sonuk); }

.ajansAlt {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 30px;
    border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.2);
}
.ajansLogoSerit { display: flex; gap: 10px; }
.ajansLogoSerit a { display: block; border-radius: 12px; transition: transform .15s; }
.ajansLogoSerit a:hover { transform: translateY(-2px); }
.ajansLogoSerit .ajansLogo { width: 52px; height: 52px; border-radius: 12px; }
.ajansLogoSerit .ajansLogo img { padding: 6px; }
.ajansAlt p { flex: 1; min-width: 220px; margin: 0; font-size: 14px; color: #c3ccd4; }

/* Sade ust cubuk (ajans sayfalari) */
.sadeUst { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); background: rgba(14,16,18,.82); border-bottom: 1px solid #1b2025; }
.sadeUstIc { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 22px; padding: 12px 24px; }
.sadeMarka { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sadeMarka img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.sadeLinkler { display: flex; gap: 22px; margin-left: 16px; }
.sadeLinkler a { color: var(--sonuk); text-decoration: none; font-size: 14px; }
.sadeLinkler a:hover, .sadeLinkler a.secili { color: #fff; }
.sadeSag { margin-left: auto; display: flex; gap: 10px; }
.sadeIcerik { max-width: 1180px; margin: 0 auto; padding: 34px 24px 80px; }

@media (max-width: 860px) {
    .ajansIzgara { grid-template-columns: 1fr; padding: 16px 16px 20px; }
    .ajansUst { padding: 22px 18px 4px; }
    .ajansUst h2 { font-size: 25px; }
    .ajansAlt { padding: 16px 18px; }
    .ajansIstatistik { grid-auto-flow: row; }
    .ajansIstatistik > div + div { border-left: none; border-top: 1px solid rgba(255,255,255,.1); }
    .sadeLinkler { display: none; }
}

/* ---------------- Mobil ---------------- */
@media (max-width: 900px) {
    .yan {
        position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
        gap: 4px; padding: 12px 14px; border-right: none; border-bottom: 1px solid #0a0c0e;
    }
    .marka { border-bottom: none; margin: 0 10px 0 0; padding: 0; }
    .menuBaslik, .markaAlt { display: none; }
    .menuOge { margin: 0; padding: 7px 10px; font-size: 13px; }
    .yanAlt { margin: 0 0 0 auto; padding: 0; border: none; display: flex; align-items: center; gap: 10px; }
    .yanAlt .uyeAd, .yanAlt .uyeEposta, .yanAlt .rozet { display: none; }
    .yanAlt .dugmeSira { margin: 0; }
    .icerik { padding: 22px 16px 60px; }
    .pencereGovde { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}


    /* Alerttik marka yazisi */
    .markaAd { background: none !important; -webkit-text-fill-color: #fff; color: #fff !important; font-weight: 800; letter-spacing: -.4px; }
    .markaAd .tik { color: #ff2a3c !important; -webkit-text-fill-color: #ff2a3c; }


    /* Marka isareti: logo kendi cerceve ve isigini tasiyor, kutu gerekmez */
    .markaIsaret, .cubukLogo, #ustCubuk .cubukLogo {
        background: transparent !important; border: none !important; box-shadow: none !important;
    }
    .markaIsaret img, .cubukLogo img, .ustMarka img, .sadeMarka img, .marka img, .girisUst img {
        object-fit: contain !important; border-radius: 0 !important;
    }

/* ===================================================================
   PANEL GORUNUMU — sakin, koyu, modern
   hesap.html (body.uyePanel) ve yonetim.html (body.yonetimPanel)
   ayni gorsel dili paylasir; bu yuzden her kural iki kapsama da
   yazildi. giris.html, index.html ve ajans sayfalari etkilenmez.
   Yalnizca yonetim paneline ait eklemeler dosyanin sonundaki
   "YONETIM PANELI" bolumunde.
   =================================================================== */

body.uyePanel, body.yonetimPanel {
    /* Panelin kendi simge tokenlari (ortak degiskenler ellenmedi) */
    --pZemin:   #0a0a0c;
    --pYuzey:   #121216;
    --pYuzey2:  #17171c;
    --pCizgi:   rgba(255,255,255,.07);
    --pCizgi2:  rgba(255,255,255,.12);
    --pMetin:   #f5f5f7;
    --pSoluk:   rgba(255,255,255,.55);
    --pSoluk2:  rgba(255,255,255,.35);
    --pKirmizi: #ff2d55;
    --pYesil:   #2fd07a;
    --pSari:    #f5b945;
    --pKose:    16px;
    --pGolge:   0 24px 60px rgba(0,0,0,.45);
    --yanGenislik: 244px;

    background:
        radial-gradient(1100px 460px at 50% -300px, rgba(255,45,85,.10) 0%, transparent 72%),
        var(--pZemin);
    color: var(--pMetin);
    font-size: 14px;
}

/* ---------------- Kenar cubugu ---------------- */
.uyePanel .yan, .yonetimPanel .yan {
    width: var(--yanGenislik);
    padding: 20px 12px 16px;
    background: linear-gradient(180deg, #121216 0%, #0d0d10 100%);
    border-right: 1px solid var(--pCizgi);
    box-shadow: none;
    gap: 0;
}
.uyePanel .marka, .yonetimPanel .marka {
    padding: 2px 10px 18px; margin-bottom: 4px;
    border-bottom: 1px solid var(--pCizgi);
}
.uyePanel .markaIsaret, .yonetimPanel .markaIsaret { width: 32px; height: 32px; }
.uyePanel .markaAd, .yonetimPanel .markaAd { font-size: 18px; letter-spacing: -.5px; }
.uyePanel .markaAlt, .yonetimPanel .markaAlt { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--pSoluk2); }

.uyePanel .menuKaydir, .yonetimPanel .menuKaydir { display: block; }
.uyePanel .menuGrup + .menuGrup, .yonetimPanel .menuGrup + .menuGrup { margin-top: 6px; }
.uyePanel .menuBaslik, .yonetimPanel .menuBaslik {
    font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--pSoluk2); padding: 14px 12px 6px; font-weight: 600;
}
.uyePanel .menuOge, .yonetimPanel .menuOge {
    position: relative; gap: 10px;
    padding: 9px 12px; margin-bottom: 2px;
    border-radius: 9px; border: 1px solid transparent;
    color: var(--pSoluk); font-size: 13.5px; font-weight: 500;
}
.uyePanel .menuOge svg, .yonetimPanel .menuOge svg { width: 16px; height: 16px; stroke-width: 1.6; opacity: .85; }
.uyePanel .menuOge:hover, .yonetimPanel .menuOge:hover { background: rgba(255,255,255,.045); color: var(--pMetin); }
.uyePanel .menuOge.secili, .yonetimPanel .menuOge.secili {
    color: #fff; border-color: var(--pCizgi);
    background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.035) 100%);
    box-shadow: none;
}
/* Aktif menuyu marka kirmizisiyla isaretleyen sol kenar cizgisi */
.uyePanel .menuOge.secili::before, .yonetimPanel .menuOge.secili::before {
    content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--pKirmizi);
    box-shadow: 0 0 12px rgba(255,45,85,.6);
}
.uyePanel .menuOge.secili svg, .yonetimPanel .menuOge.secili svg { opacity: 1; stroke: var(--pKirmizi); }

.uyePanel .yanAlt, .yonetimPanel .yanAlt { padding: 14px 10px 0; border-top: 1px solid var(--pCizgi); }
.uyePanel .uyeAd, .yonetimPanel .uyeAd { font-size: 13px; color: #fff; }
.uyePanel .uyeEposta, .yonetimPanel .uyeEposta { font-size: 11.5px; color: var(--pSoluk2); margin-bottom: 9px; }
.uyePanel .yanAlt .rozet, .yonetimPanel .yanAlt .rozet { font-size: 10.5px; }
.uyePanel .yanAlt .dugmeSira, .yonetimPanel .yanAlt .dugmeSira { margin-top: 11px; }
.uyePanel .yanAlt .mini, .yonetimPanel .yanAlt .mini { width: 100%; justify-content: center; }

/* ---------------- Icerik ve ust cubuk ---------------- */
.uyePanel .icerik, .yonetimPanel .icerik { padding: 0 34px 90px; max-width: calc(1180px + var(--yanGenislik)); }

.uyePanel .panelUst, .yonetimPanel .panelUst {
    position: sticky; top: 0; z-index: 9;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 0 16px; margin-bottom: 26px;
    border-bottom: 1px solid var(--pCizgi);
    background: linear-gradient(180deg, rgba(10,10,12,.96) 70%, rgba(10,10,12,.78) 100%);
    backdrop-filter: blur(10px);
}
.uyePanel .panelUstAd, .yonetimPanel .panelUstAd { font-size: 14.5px; font-weight: 600; color: #fff; letter-spacing: -.2px; }
.uyePanel .panelUstSag, .yonetimPanel .panelUstSag { display: flex; align-items: center; gap: 10px; }

/* Durum hapi */
.uyePanel .hap, .yonetimPanel .hap {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 5px 13px; border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--pSoluk);
    border: 1px solid var(--pCizgi2); background: rgba(255,255,255,.03);
}
.uyePanel .hap::before, .yonetimPanel .hap::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.uyePanel .hap.canli, .yonetimPanel .hap.canli { color: #ff6b85; border-color: rgba(255,45,85,.4); background: rgba(255,45,85,.08); }
.uyePanel .hap.canli::before, .yonetimPanel .hap.canli::before { background: var(--pKirmizi); box-shadow: 0 0 8px var(--pKirmizi); opacity: 1; }
.uyePanel .hap.iyi, .yonetimPanel .hap.iyi { color: #74e0a8; border-color: rgba(47,208,122,.32); background: rgba(47,208,122,.07); }
.uyePanel .hap.sari, .yonetimPanel .hap.sari { color: #f3cd82; border-color: rgba(245,185,69,.32); background: rgba(245,185,69,.07); }

/* ---------------- Sayfa hiyerarsisi ---------------- */
.uyePanel .sayfaUstBlok, .yonetimPanel .sayfaUstBlok { margin-bottom: 26px; }
.uyePanel .ustEtiket, .yonetimPanel .ustEtiket {
    font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--pSoluk2); margin-bottom: 10px;
}
.uyePanel .sayfaBaslik, .yonetimPanel .sayfaBaslik { font-size: 30px; font-weight: 600; letter-spacing: -.9px; line-height: 1.15; margin: 0 0 8px; }
.uyePanel .sayfaAlt, .yonetimPanel .sayfaAlt { margin: 0; color: var(--pSoluk); font-size: 14px; max-width: 70ch; }
.uyePanel .paketlerUst, .yonetimPanel .paketlerUst { margin-bottom: 26px; align-items: flex-end; }
.uyePanel .paketlerUst .sayfaUstBlok, .yonetimPanel .paketlerUst .sayfaUstBlok { margin-bottom: 0; }

/* ---------------- Kartlar ---------------- */
.uyePanel .kutu, .yonetimPanel .kutu {
    border-radius: var(--pKose); border: 1px solid var(--pCizgi); padding: 24px 26px;
    background: linear-gradient(180deg, var(--pYuzey2) 0%, var(--pYuzey) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 18px 44px rgba(0,0,0,.34);
}
.uyePanel .kutu + .kutu, .yonetimPanel .kutu + .kutu { margin-top: 20px; }
.uyePanel .kutu h3, .yonetimPanel .kutu h3 { font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
.uyePanel .izgara2, .yonetimPanel .izgara2 { gap: 20px; margin-bottom: 20px; }
.uyePanel .baslikSatir, .yonetimPanel .baslikSatir { margin-bottom: 16px; }
.uyePanel .kutuAlt, .yonetimPanel .kutuAlt, .uyePanel .elleEkle, .yonetimPanel .elleEkle { border-color: var(--pCizgi); }
.uyePanel .kucuk, .yonetimPanel .kucuk { font-size: 12px; }
.uyePanel .sonuk, .yonetimPanel .sonuk { color: var(--pSoluk); }

/* ---------------- Dugmeler ---------------- */
.uyePanel button, .yonetimPanel button, .uyePanel .dugme, .yonetimPanel .dugme {
    border-radius: 10px; font-size: 13px; font-weight: 500; padding: 9px 16px;
    border: 1px solid var(--pCizgi2);
    background: rgba(255,255,255,.04);
    box-shadow: none;
}
.uyePanel button:hover, .yonetimPanel button:hover, .uyePanel .dugme:hover,
.yonetimPanel .dugme:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.uyePanel .ana, .yonetimPanel .ana, .uyePanel .vurgu, .yonetimPanel .vurgu {
    color: #fff !important; font-weight: 600; border-color: transparent;
    background: var(--pKirmizi);
    box-shadow: 0 6px 20px rgba(255,45,85,.26);
}
.uyePanel .ana:hover, .yonetimPanel .ana:hover, .uyePanel .vurgu:hover,
.yonetimPanel .vurgu:hover { background: #ff4468; border-color: transparent; }
.uyePanel .ana:disabled:hover, .yonetimPanel .ana:disabled:hover,
.uyePanel .vurgu:disabled:hover, .yonetimPanel .vurgu:disabled:hover { background: var(--pKirmizi); }
.uyePanel .mini, .yonetimPanel .mini { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.uyePanel .tehlike, .yonetimPanel .tehlike { color: #ff8da2; }
.uyePanel .tehlike:hover, .yonetimPanel .tehlike:hover { border-color: rgba(255,45,85,.45); background: rgba(255,45,85,.1); }

.uyePanel input[type="text"], .yonetimPanel input[type="text"], .uyePanel input[type="email"],
.yonetimPanel input[type="email"], .uyePanel input[type="tel"], .yonetimPanel input[type="tel"],
.uyePanel input[type="search"], .yonetimPanel input[type="search"], .uyePanel select,
.yonetimPanel select, .uyePanel textarea, .yonetimPanel textarea {
    border-radius: 10px; padding: 10px 12px;
    border: 1px solid var(--pCizgi2); background: rgba(255,255,255,.03); box-shadow: none;
}
/* Odak rengi notr: kirmizi cerceve yazarken "hata var" gibi okunuyordu.
   Kirmizi yalnizca gercek dogrulama hatasinda (.hatali) kullanilir. */
.uyePanel input:focus, .yonetimPanel input:focus, .uyePanel select:focus,
.yonetimPanel select:focus, .uyePanel textarea:focus, .yonetimPanel textarea:focus {
    border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 3px rgba(255,255,255,.07);
}
.uyePanel input.hatali, .yonetimPanel input.hatali,
.uyePanel input.hatali:focus, .yonetimPanel input.hatali:focus {
    border-color: rgba(255,45,85,.65); box-shadow: 0 0 0 3px rgba(255,45,85,.14);
}

/* ---------------- Rozet, tablo, uyari ---------------- */
.uyePanel .rozet, .yonetimPanel .rozet {
    border-radius: 999px; font-size: 11px; padding: 1px 9px;
    color: var(--pSoluk); border: 1px solid var(--pCizgi2); background: rgba(255,255,255,.03);
}
.uyePanel .rozet.yesil, .yonetimPanel .rozet.yesil { color: #74e0a8; border-color: rgba(47,208,122,.3); background: rgba(47,208,122,.07); }
.uyePanel .rozet.altin, .yonetimPanel .rozet.altin { color: #f3cd82; border-color: rgba(245,185,69,.3); background: rgba(245,185,69,.07); }
.uyePanel .rozet.kirmizi, .yonetimPanel .rozet.kirmizi { color: #ff8da2; border-color: rgba(255,45,85,.3); background: rgba(255,45,85,.08); }

.uyePanel .tabloKap, .yonetimPanel .tabloKap { border: 1px solid var(--pCizgi); border-radius: var(--pKose); background: var(--pYuzey); }
.uyePanel .tablo th, .yonetimPanel .tablo th {
    background: rgba(255,255,255,.025); border-bottom: 1px solid var(--pCizgi);
    box-shadow: none; color: var(--pSoluk); font-size: 11px;
    letter-spacing: .6px; text-transform: uppercase; font-weight: 600; padding: 12px 16px;
}
.uyePanel .tablo td, .yonetimPanel .tablo td { border-bottom: 1px solid var(--pCizgi); padding: 13px 16px; font-size: 13px; }
.uyePanel .tablo tbody tr:hover td, .yonetimPanel .tablo tbody tr:hover td { background: rgba(255,255,255,.02); }
/* Tablo icindeki eylemler sakin kalsin: dolu kirmizi yalnizca sayfa duzeyindeki
   birincil dugmelerde kullanilir */
.uyePanel .tablo .ana, .yonetimPanel .tablo .ana {
    color: #ff8da2 !important; background: rgba(255,45,85,.1);
    border-color: rgba(255,45,85,.3); box-shadow: none;
}
.uyePanel .tablo .ana:hover, .yonetimPanel .tablo .ana:hover { background: rgba(255,45,85,.18); border-color: rgba(255,45,85,.5); }
.uyePanel .duyuru, .yonetimPanel .duyuru, .uyePanel .uyari, .yonetimPanel .uyari,
.uyePanel .formHata, .yonetimPanel .formHata { border-radius: 12px; }
.uyePanel .bilgiListe, .yonetimPanel .bilgiListe { border-color: var(--pCizgi); border-radius: 12px; }
.uyePanel .bilgiSatir, .yonetimPanel .bilgiSatir { border-color: var(--pCizgi); flex-wrap: wrap; }
.uyePanel .bilgiSatir > span, .yonetimPanel .bilgiSatir > span { width: auto; min-width: 86px; color: var(--pSoluk); }
/* Uzun e-posta adresi harf harf bolunmesin: sigmazsa alt satira gecer */
.uyePanel .bilgiSatir > b, .yonetimPanel .bilgiSatir > b { flex: 1 1 170px; min-width: 0; word-break: normal; overflow-wrap: anywhere; }
.uyePanel .bosDurum, .yonetimPanel .bosDurum { padding: 46px 20px; }

.uyePanel .donemSecici, .yonetimPanel .donemSecici {
    border-radius: 999px; padding: 3px; border: 1px solid var(--pCizgi); background: rgba(255,255,255,.03);
}
.uyePanel .donemSecici button, .yonetimPanel .donemSecici button {
    border: none; background: none; border-radius: 999px; padding: 6px 15px;
    color: var(--pSoluk); font-size: 12.5px; box-shadow: none;
}
.uyePanel .donemSecici button:hover, .yonetimPanel .donemSecici button:hover { background: rgba(255,255,255,.05); color: var(--pMetin); }
.uyePanel .donemSecici button.secili, .yonetimPanel .donemSecici button.secili {
    background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.uyePanel .paketKart, .yonetimPanel .paketKart {
    border-radius: 18px; border: 1px solid var(--pCizgi);
    background: linear-gradient(180deg, var(--pYuzey2) 0%, var(--pYuzey) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 18px 44px rgba(0,0,0,.34);
}
.uyePanel .paketKart.vurgulu, .yonetimPanel .paketKart.vurgulu {
    border-color: rgba(255,45,85,.4);
    background: linear-gradient(180deg, rgba(255,45,85,.07) 0%, var(--pYuzey) 190px);
    box-shadow: 0 0 0 1px rgba(255,45,85,.1), var(--pGolge);
}
.uyePanel .paketKart .serit, .yonetimPanel .paketKart .serit { background: var(--pKirmizi); color: #fff; font-weight: 600; border-radius: 999px; }
.uyePanel .paketKart.mevcut, .yonetimPanel .paketKart.mevcut { border-color: var(--pCizgi2); }
.uyePanel .paketKart.mevcut .serit, .yonetimPanel .paketKart.mevcut .serit { background: rgba(255,255,255,.14); color: #fff; }
.uyePanel .fiyat, .yonetimPanel .fiyat { letter-spacing: -1.2px; font-weight: 600; }
.uyePanel .cubuk, .yonetimPanel .cubuk { background: rgba(255,255,255,.05); box-shadow: none; }
.uyePanel .cubuk > i, .yonetimPanel .cubuk > i { background: linear-gradient(90deg, #6b7380, #e8ecf2); }
.uyePanel .cubuk.dolu > i, .yonetimPanel .cubuk.dolu > i { background: linear-gradient(90deg, #b33049, var(--pKirmizi)); }

/* ===================================================================
   Genel bakis: bagli hesap karti, istatistik izgarasi, gunluk grafik
   =================================================================== */

/* ---- Bagli hesap karti ---- */
.uyePanel .heroKart, .yonetimPanel .heroKart {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 22px 26px; margin-bottom: 20px;
    border-radius: var(--pKose); border: 1px solid var(--pCizgi);
    background:
        radial-gradient(520px 200px at 100% 0%, rgba(255,45,85,.09), transparent 68%),
        linear-gradient(180deg, var(--pYuzey2) 0%, var(--pYuzey) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 18px 44px rgba(0,0,0,.34);
}
/* Fotograf yuklenemezse arkadaki bas harf gorunur */
.uyePanel .heroAvatar, .yonetimPanel .heroAvatar {
    position: relative; overflow: hidden;
    width: 62px; height: 62px; border-radius: 50%; flex: none;
    background: #1c1c22; border: 1px solid var(--pCizgi2);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 600; color: var(--pSoluk);
}
.uyePanel .heroAvatar img, .yonetimPanel .heroAvatar img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%; display: block;
}
.uyePanel .heroMetin, .yonetimPanel .heroMetin { flex: 1 1 240px; min-width: 0; }
.uyePanel .heroAd, .yonetimPanel .heroAd {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 19px; font-weight: 600; letter-spacing: -.4px; color: #fff; line-height: 1.25;
}
.uyePanel .heroKullanici, .yonetimPanel .heroKullanici { font-size: 13px; color: var(--pSoluk); margin-top: 1px; }
.uyePanel .heroAlt, .yonetimPanel .heroAlt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px; }
.uyePanel .heroAlt .kucuk, .yonetimPanel .heroAlt .kucuk { color: var(--pSoluk2); }
.uyePanel .heroDugmeler, .yonetimPanel .heroDugmeler { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* ---- Istatistik kutusu ---- */
.uyePanel .istUst, .yonetimPanel .istUst {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.uyePanel .istUst .ustEtiket, .yonetimPanel .istUst .ustEtiket { margin-bottom: 6px; }
.uyePanel .istAraclar, .yonetimPanel .istAraclar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uyePanel .istAraclar select, .yonetimPanel .istAraclar select { width: auto; min-width: 180px; max-width: 100%; font-size: 13px; padding: 7px 11px; border-radius: 999px; }

/* 4x2 ince izgara: bosluk yerine cizgi rengi gorunur */
.uyePanel .istIzgara, .yonetimPanel .istIzgara {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    background: var(--pCizgi);
    border: 1px solid var(--pCizgi); border-radius: 12px; overflow: hidden;
}
.uyePanel .istHucre, .yonetimPanel .istHucre { padding: 16px 18px 17px; background: var(--pYuzey); }
.uyePanel .istHucre .etiket, .yonetimPanel .istHucre .etiket {
    font-size: 10px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--pSoluk2);
}
.uyePanel .istHucre .deger, .yonetimPanel .istHucre .deger {
    margin-top: 7px; font-size: 24px; font-weight: 550; letter-spacing: -1px; color: #fff;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.uyePanel .istHucre .deger.yok, .yonetimPanel .istHucre .deger.yok { color: var(--pSoluk2); font-weight: 400; }
.uyePanel .istHucre .alt, .yonetimPanel .istHucre .alt { margin-top: 5px; font-size: 11.5px; color: var(--pSoluk2); }
.uyePanel .istNot, .yonetimPanel .istNot { margin-top: 14px; font-size: 11.5px; color: var(--pSoluk2); }
/* Yayin kaydi yokken: sifirlar gercek veri gibi gosterilmez */
.uyePanel .istBos, .yonetimPanel .istBos {
    padding: 38px 20px; text-align: center; font-size: 13.5px; color: var(--pSoluk);
    border: 1px dashed var(--pCizgi2); border-radius: 12px;
    background: rgba(255,255,255,.015);
}

/* ---- Gunluk etkilesim grafigi ---- */
.uyePanel .grafikKutu .istUst, .yonetimPanel .grafikKutu .istUst { margin-bottom: 22px; }
.uyePanel .grafik, .yonetimPanel .grafik {
    display: flex; align-items: flex-end; gap: 4px; height: 148px;
    padding-bottom: 10px; border-bottom: 1px solid var(--pCizgi);
}
.uyePanel .grafikCubuk, .yonetimPanel .grafikCubuk { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; border-radius: 4px; }
.uyePanel .grafikCubuk i, .yonetimPanel .grafikCubuk i {
    display: block; width: 100%; min-height: 2px; border-radius: 3px;
    background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 100%);
    transition: background .15s;
}
.uyePanel .grafikCubuk:hover i, .yonetimPanel .grafikCubuk:hover i { background: var(--pKirmizi); }
.uyePanel .grafikCubuk.bos i, .yonetimPanel .grafikCubuk.bos i { background: rgba(255,255,255,.05); }
.uyePanel .grafikEksen, .yonetimPanel .grafikEksen {
    display: flex; justify-content: space-between; margin-top: 9px;
    font-size: 11px; color: var(--pSoluk2);
}
.uyePanel .grafikBos, .yonetimPanel .grafikBos { padding: 34px 0; text-align: center; color: var(--pSoluk2); font-size: 13px; }

/* ===================================================================
   KAZANC: elmasin para karsiligi
   Istatistik kartiyla ayni dil: ust etiket -> baslik -> tek cumle,
   ince cizgili izgara, ayni rakam olcegi ve tabular rakamlar.
   =================================================================== */
.uyePanel .kazancKutu .istUst, .yonetimPanel .kazancKutu .istUst { margin-bottom: 20px; align-items: flex-start; }
.uyePanel .kazancLead, .yonetimPanel .kazancLead {
    margin: 7px 0 0; font-size: 12.5px; color: var(--pSoluk); max-width: 56ch;
}
.uyePanel .kazancAraclar, .yonetimPanel .kazancAraclar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}

/* ₺ / $ anahtari: donem secicisiyle ayni gorsel dil */
.uyePanel .paraSecici button, .yonetimPanel .paraSecici button {
    min-width: 40px; padding: 6px 12px; font-size: 13.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.uyePanel .paraSecici button:disabled, .yonetimPanel .paraSecici button:disabled {
    opacity: .34; cursor: not-allowed; background: none;
}
.uyePanel .paraSecici button:disabled:hover, .yonetimPanel .paraSecici button:disabled:hover { background: none; color: var(--pSoluk); }
.uyePanel .paraSecici button:focus-visible, .yonetimPanel .paraSecici button:focus-visible {
    outline: 2px solid rgba(255,255,255,.5); outline-offset: 1px;
}

/* 3 hucreli ince izgara: donem kazanci · donemin elmasi · tum zamanlar */
.uyePanel .kazancIzgara, .yonetimPanel .kazancIzgara {
    display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1px;
    background: var(--pCizgi);
    border: 1px solid var(--pCizgi); border-radius: 12px; overflow: hidden;
}
.uyePanel .kazancHucre, .yonetimPanel .kazancHucre { padding: 17px 20px 19px; background: var(--pYuzey); min-width: 0; }
/* Para hucresi: sakin bir yesil isik, rakam olcegi degismez */
.uyePanel .kazancHucre.para, .yonetimPanel .kazancHucre.para {
    background:
        radial-gradient(420px 170px at 0% 0%, rgba(47,208,122,.085), transparent 72%),
        var(--pYuzey);
}
.uyePanel .kazancHucre .etiket, .yonetimPanel .kazancHucre .etiket {
    font-size: 10px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--pSoluk2);
}
.uyePanel .kazancHucre .deger, .yonetimPanel .kazancHucre .deger {
    margin-top: 7px; font-size: 24px; font-weight: 550; letter-spacing: -1px; color: #fff;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.uyePanel .kazancHucre .deger.yok, .yonetimPanel .kazancHucre .deger.yok { color: var(--pSoluk2); font-weight: 400; }
.uyePanel .kazancHucre .alt, .yonetimPanel .kazancHucre .alt { margin-top: 5px; font-size: 11.5px; color: var(--pSoluk2); }

/* Kahraman rakam: kartin en buyuk sayisi */
.uyePanel .kazancTutar, .yonetimPanel .kazancTutar {
    margin-top: 8px; font-size: 34px; font-weight: 600; letter-spacing: -1.4px; color: #fff;
    font-variant-numeric: tabular-nums; line-height: 1.05; overflow-wrap: anywhere;
}
.uyePanel .kazancTutar.yok, .yonetimPanel .kazancTutar.yok { font-size: 26px; color: var(--pSoluk2); font-weight: 400; letter-spacing: -.6px; }
.uyePanel .kazancTl, .yonetimPanel .kazancTl {
    margin-top: 6px; font-size: 12.5px; color: var(--pSoluk); font-variant-numeric: tabular-nums;
    min-height: 17px; max-width: 42ch;
}
.uyePanel .kazancFark, .yonetimPanel .kazancFark {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 13px; min-height: 24px;
}
.uyePanel .kazancFarkHap, .yonetimPanel .kazancFarkHap {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--pSoluk); border: 1px solid var(--pCizgi2); background: rgba(255,255,255,.03);
}
.uyePanel .kazancFarkHap.artis, .yonetimPanel .kazancFarkHap.artis {
    color: #74e0a8; border-color: rgba(47,208,122,.34); background: rgba(47,208,122,.08);
}
.uyePanel .kazancFarkHap.azalis, .yonetimPanel .kazancFarkHap.azalis {
    color: #ff8da2; border-color: rgba(255,45,85,.34); background: rgba(255,45,85,.08);
}
.uyePanel .kazancKiyas, .yonetimPanel .kazancKiyas { font-size: 11.5px; color: var(--pSoluk2); font-variant-numeric: tabular-nums; }

/* Kart icindeki alt bolumler: cizgiyle ayrilir, ayni ritim */
.uyePanel .kazancBolme, .yonetimPanel .kazancBolme {
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--pCizgi);
}
.uyePanel .kazancBolmeUst, .yonetimPanel .kazancBolmeUst {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 16px;
}
.uyePanel .kazancBolmeUst h4, .yonetimPanel .kazancBolmeUst h4 {
    margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: -.1px; color: var(--pMetin);
}
.uyePanel .kazancSeriNot, .yonetimPanel .kazancSeriNot { margin-top: 10px; font-size: 11.5px; color: var(--pSoluk2); }

/* En cok kazandiranlar: 20 satir.
   Satirlar JS tarafinda kolonlara bolunur (1-10 / 11-20). Dar ekranda
   kolonlar alt alta akar, genis ekranda yan yana durur; boylece 20 satir
   ne sikisir ne de karti gereksiz uzatir. */
.uyePanel .kazancListe, .yonetimPanel .kazancListe {
    display: grid; grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--pCizgi); border-radius: 12px; overflow: hidden; background: var(--pYuzey);
}
.uyePanel .kazancKolon, .yonetimPanel .kazancKolon { min-width: 0; }
.uyePanel .kazancKolon + .kazancKolon, .yonetimPanel .kazancKolon + .kazancKolon {
    border-top: 1px solid var(--pCizgi);
}
@media (min-width: 1180px) {
    .uyePanel .kazancListe.iki, .yonetimPanel .kazancListe.iki {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .uyePanel .kazancListe.iki .kazancKolon + .kazancKolon,
    .yonetimPanel .kazancListe.iki .kazancKolon + .kazancKolon {
        border-top: none; border-left: 1px solid var(--pCizgi);
    }
}
.uyePanel .kazancSatir, .yonetimPanel .kazancSatir {
    display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) auto;
    align-items: center; gap: 12px; padding: 11px 16px;
}
.uyePanel .kazancSatir + .kazancSatir, .yonetimPanel .kazancSatir + .kazancSatir { border-top: 1px solid var(--pCizgi); }
.uyePanel .kazancSatir:hover, .yonetimPanel .kazancSatir:hover { background: rgba(255,255,255,.02); }
.uyePanel .kazancSira, .yonetimPanel .kazancSira {
    font-size: 11.5px; font-weight: 600; color: var(--pSoluk2); text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Uzun listede ilk ucu gozle bulmak kolay olsun */
.uyePanel .kazancSatir.ilk .kazancSira, .yonetimPanel .kazancSatir.ilk .kazancSira { color: #f3cd82; }
.uyePanel .kazancFoto, .yonetimPanel .kazancFoto {
    position: relative; overflow: hidden;
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: #1c1c22; border: 1px solid var(--pCizgi2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--pSoluk);
}
.uyePanel .kazancFoto img, .yonetimPanel .kazancFoto img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.uyePanel .kazancKisi, .yonetimPanel .kazancKisi { min-width: 0; }
.uyePanel .kazancKisi b, .yonetimPanel .kazancKisi b {
    display: block; font-size: 13px; font-weight: 500; color: var(--pMetin);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uyePanel .kazancKisi i, .yonetimPanel .kazancKisi i {
    display: block; font-style: normal; font-size: 11.5px; color: var(--pSoluk2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uyePanel .kazancSatirPara, .yonetimPanel .kazancSatirPara { text-align: right; white-space: nowrap; }
.uyePanel .kazancSatirPara b, .yonetimPanel .kazancSatirPara b {
    display: block; font-size: 13.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
}
.uyePanel .kazancSatirPara i, .yonetimPanel .kazancSatirPara i {
    display: block; font-style: normal; font-size: 11.5px; color: var(--pSoluk2); font-variant-numeric: tabular-nums;
}
/* Veri gelmeden onceki iskelet: ayni yuksekligi tutar, sayfa oynamaz */
.uyePanel .kazancSatir.iskelet, .yonetimPanel .kazancSatir.iskelet { color: var(--pSoluk2); }
.uyePanel .kazancSatir.iskelet b, .yonetimPanel .kazancSatir.iskelet b { color: var(--pSoluk2); font-weight: 400; }
.uyePanel .kazancSatir.iskelet:hover, .yonetimPanel .kazancSatir.iskelet:hover { background: none; }
.uyePanel .kazancListeBos, .yonetimPanel .kazancListeBos {
    padding: 28px 20px; text-align: center; font-size: 13px; color: var(--pSoluk2);
}

/* Kur ve "tahmini" uyarisi: sessiz ama her zaman gorunur */
.uyePanel .kazancDipnot, .yonetimPanel .kazancDipnot {
    margin: 18px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--pSoluk2); max-width: 90ch;
}

/* ---------------- Mobil ---------------- */
@media (max-width: 900px) {
    .uyePanel .yan, .yonetimPanel .yan {
        /* Mobilde kenar cubugu ustte yatay serit olur: sabit 244px genislik kalirsa
           cok dar ekranlarda (<300px) sayfa yatay kayiyordu. */
        width: auto;
        flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
        padding: 12px 16px; border-right: none; border-bottom: 1px solid var(--pCizgi);
    }
    .uyePanel .marka, .yonetimPanel .marka { border-bottom: none; padding: 0; margin: 0; }
    .uyePanel .markaAlt, .yonetimPanel .markaAlt { display: none; }
    .uyePanel .menuKaydir, .yonetimPanel .menuKaydir {
        order: 3; flex: 1 0 100%; display: flex; gap: 6px;
        overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    }
    .uyePanel .menuKaydir::-webkit-scrollbar, .yonetimPanel .menuKaydir::-webkit-scrollbar { display: none; }
    .uyePanel .menuGrup, .yonetimPanel .menuGrup { display: flex; gap: 6px; margin: 0 !important; }
    .uyePanel .menuGrup:not(.gizli) + .menuGrup:not(.gizli)::before,
    .yonetimPanel .menuGrup:not(.gizli) + .menuGrup:not(.gizli)::before {
        content: ''; align-self: center; width: 1px; height: 18px; background: var(--pCizgi); margin: 0 3px;
    }
    .uyePanel .menuBaslik, .yonetimPanel .menuBaslik { display: none; }
    .uyePanel .menuOge, .yonetimPanel .menuOge { margin: 0; white-space: nowrap; padding: 8px 12px; }
    .uyePanel .menuOge.secili::before, .yonetimPanel .menuOge.secili::before { left: 0; top: auto; bottom: -2px; transform: none; width: 100%; height: 2px; border-radius: 2px; }
    .uyePanel .yanAlt, .yonetimPanel .yanAlt {
        order: 2; margin-left: auto; padding: 0; border: none;
        display: flex; align-items: center; gap: 10px;
    }
    .uyePanel .yanAlt .uyeAd, .yonetimPanel .yanAlt .uyeAd, .uyePanel .yanAlt .uyeEposta,
    .yonetimPanel .yanAlt .uyeEposta { display: none; }
    .uyePanel .yanAlt .rozet, .yonetimPanel .yanAlt .rozet { display: inline-block; }
    .uyePanel .yanAlt .dugmeSira, .yonetimPanel .yanAlt .dugmeSira { margin: 0; }
    .uyePanel .yanAlt .mini, .yonetimPanel .yanAlt .mini { width: auto; }
    .uyePanel .icerik, .yonetimPanel .icerik { padding: 0 16px 70px; }
    .uyePanel .panelUst, .yonetimPanel .panelUst { padding: 14px 0 12px; margin-bottom: 20px; }
    .uyePanel .sayfaBaslik, .yonetimPanel .sayfaBaslik { font-size: 25px; letter-spacing: -.7px; }
    .uyePanel .kutu, .yonetimPanel .kutu { padding: 20px 18px; }
    .uyePanel .heroKart, .yonetimPanel .heroKart { padding: 18px; gap: 16px; }
    .uyePanel .heroDugmeler, .yonetimPanel .heroDugmeler { margin-left: 0; flex: 1 0 100%; }
    .uyePanel .heroDugmeler .dugme, .yonetimPanel .heroDugmeler .dugme { flex: 1 1 140px; }
    .uyePanel .kazancIzgara, .yonetimPanel .kazancIzgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Kahraman hucre tek basina tam genislik: buyuk rakam bolunmez */
    .uyePanel .kazancHucre.para, .yonetimPanel .kazancHucre.para { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .uyePanel .istIzgara, .yonetimPanel .istIzgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uyePanel .istAraclar, .yonetimPanel .istAraclar { width: 100%; }
    .uyePanel .istAraclar select, .yonetimPanel .istAraclar select, .uyePanel .istDonem,
    .yonetimPanel .istDonem { width: 100%; }
    .uyePanel .istDonem, .yonetimPanel .istDonem { justify-content: space-between; }
    .uyePanel .istDonem button, .yonetimPanel .istDonem button { flex: 1 1 0; padding: 6px 4px; }
    .uyePanel .grafik, .yonetimPanel .grafik { height: 112px; gap: 2px; }
    .uyePanel .heroAvatar, .yonetimPanel .heroAvatar { width: 54px; height: 54px; }
    .uyePanel .heroAd, .yonetimPanel .heroAd { font-size: 17px; }

    /* Kazanc: tek kolon, biraz daha kucuk kahraman rakam */
    .uyePanel .kazancIzgara, .yonetimPanel .kazancIzgara { grid-template-columns: minmax(0, 1fr); }
    .uyePanel .kazancHucre, .yonetimPanel .kazancHucre { padding: 15px 16px 17px; }
    .uyePanel .kazancTutar, .yonetimPanel .kazancTutar { font-size: 29px; letter-spacing: -1.1px; }
    .uyePanel .kazancTutar.yok, .yonetimPanel .kazancTutar.yok { font-size: 23px; }
    .uyePanel .kazancAraclar, .yonetimPanel .kazancAraclar { width: 100%; justify-content: flex-start; }
    .uyePanel .kazancSatir, .yonetimPanel .kazancSatir { grid-template-columns: 18px 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
    .uyePanel .kazancFoto, .yonetimPanel .kazancFoto { width: 30px; height: 30px; font-size: 12px; }
}

/* ===================================================================
   YONETIM PANELI (yonetim.html)
   Yukaridaki ortak panel dilinin uzerine yalnizca yonetim
   ekranlarina ait eklemeler. Baska hicbir sayfa bu kurallari gormez.
   =================================================================== */

/* ---------------- Sayfa hiyerarsisi ---------------- */
/* Her bolumde: ust etiket -> baslik -> tek cumle; sagda bolum eylemi */
.yonetimPanel .sayfaUst { align-items: flex-end; margin-bottom: 26px; }
.yonetimPanel .sayfaUst .sayfaUstBlok { margin-bottom: 0; }
.yonetimPanel .sayfaUst .sayfaAlt { margin-bottom: 0; }
.yonetimPanel .araBaslik { font-size: 13.5px; margin: 26px 0 8px; letter-spacing: -.2px; }
.yonetimPanel .araBaslik .onay { font-size: 13.5px; font-weight: 500; }

/* ---------------- Ozet: ince cizgili istatistik izgarasi ---------- */
/* Uye panelindeki .istIzgara ile ayni dil: bosluk degil, cizgi ayirir */
.yonetimPanel .istatistikler {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 0; margin-bottom: 20px;
    background: var(--pYuzey);
    border: 1px solid var(--pCizgi); border-radius: 12px; overflow: hidden;
}
/* Ayirici cizgiler hucrenin disina dusen golgelerle cizilir: son satir
   tam dolmadiginda bos alanda cizgi gorunmez, kenarda da cift cizgi olmaz. */
.yonetimPanel .istatistik {
    border: none; border-radius: 0; background: var(--pYuzey); padding: 16px 18px 17px;
    box-shadow: 1px 0 0 var(--pCizgi), 0 1px 0 var(--pCizgi);
}
.yonetimPanel .istatistik .etiket {
    font-size: 10px; font-weight: 600; letter-spacing: 1.1px;
    text-transform: uppercase; color: var(--pSoluk2);
}
.yonetimPanel .istatistik .deger {
    margin-top: 7px; font-size: 24px; font-weight: 550; letter-spacing: -1px;
    color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.yonetimPanel .istatistik .not { margin-top: 5px; font-size: 11.5px; color: var(--pSoluk2); }
.yonetimPanel .istatistik .not a { color: #ff6b85; }

.yonetimPanel .kullanimUst { font-size: 13px; }
.yonetimPanel .kullanimSatir + .kullanimSatir { margin-top: 13px; }

/* ---------------- Araclar: arama, filtre hapi, secimler ---------- */
.yonetimPanel .araclar { gap: 10px; margin-bottom: 16px; }
.yonetimPanel .araclar input[type="search"] { flex: 1 1 260px; max-width: 360px; }
.yonetimPanel .filtreler {
    gap: 2px; padding: 3px; border-radius: 999px;
    border: 1px solid var(--pCizgi); background: rgba(255,255,255,.03);
}
.yonetimPanel .filtreler button {
    border: none; background: none; box-shadow: none;
    border-radius: 999px; padding: 6px 15px; font-size: 12.5px; color: var(--pSoluk);
}
.yonetimPanel .filtreler button:hover { background: rgba(255,255,255,.05); color: var(--pMetin); }
.yonetimPanel .filtreler button.secili {
    background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

/* ---------------- Tablolar ---------------- */
/* Sayi sutunlari saga yaslanir ve rakamlar esit genislikte dizilir */
.yonetimPanel .tablo th.sayiBaslik, .yonetimPanel .tablo td.sayiHucre { text-align: right; }
.yonetimPanel .tablo td.sayiHucre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.yonetimPanel .tablo td .kucuk { line-height: 1.45; }
.yonetimPanel .tablo td.sag > * + * { margin-left: 6px; }
.yonetimPanel .tablo .mini { padding: 5px 11px; font-size: 12px; }
.yonetimPanel .tablo .tehlike { color: #ff8da2; }
/* Dolu kirmizi yalnizca sayfa duzeyindeki birincil dugmelerde kalsin;
   kart ve tablo icindeki eylemler sakin kirmizi kullanir */
.yonetimPanel .yPaket .ana, .yonetimPanel .yAjans .ana {
    color: #ff8da2 !important; background: rgba(255,45,85,.1);
    border-color: rgba(255,45,85,.3); box-shadow: none;
}
.yonetimPanel .yPaket .ana:hover, .yonetimPanel .yAjans .ana:hover {
    background: rgba(255,45,85,.18); border-color: rgba(255,45,85,.5);
}
/* Kutu icine gomulu tablo kutunun kenarlarina kadar uzansin */
.yonetimPanel .kutu .tabloKap { margin: 0 -26px -24px; }
.yonetimPanel .sayfalama { margin-top: 14px; font-size: 12.5px; color: var(--pSoluk2); }

/* ---------------- Formlar ---------------- */
/* Ortak blokta olmayan girdi turleri de ayni kutu dilini kullanir */
.yonetimPanel input[type="password"], .yonetimPanel input[type="number"],
.yonetimPanel input[type="date"], .yonetimPanel input[type="url"] {
    border-radius: 10px; padding: 10px 12px;
    border: 1px solid var(--pCizgi2); background: rgba(255,255,255,.03); box-shadow: none;
}
.yonetimPanel .alan > span { font-size: 12px; color: var(--pSoluk); margin-bottom: 7px; }
.yonetimPanel .onay { font-size: 13.5px; }
.yonetimPanel input[type="file"] { font-size: 12.5px; color: var(--pSoluk); }
.yonetimPanel input[type="file"]::file-selector-button {
    margin-right: 10px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; color: var(--pMetin);
    border: 1px solid var(--pCizgi2); background: rgba(255,255,255,.04);
}
.yonetimPanel input[type="file"]::file-selector-button:hover { background: rgba(255,255,255,.08); }
.yonetimPanel .izgaraForm { gap: 16px 18px; }
.yonetimPanel .formDikey { gap: 16px; }
.yonetimPanel .kutuAlt { margin-top: 20px; padding-top: 18px; }

/* ---------------- Rozet ve menu sayaci ---------------- */
.yonetimPanel .rozet.mavi {
    color: #9fc6f0; border-color: rgba(127,182,230,.3); background: rgba(127,182,230,.08);
}
.yonetimPanel .menuRozet {
    min-width: 18px; padding: 0 6px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; line-height: 17px; background: var(--pKirmizi);
}
/* Kenar cubugunun dibindeki iki dugme yan yana dursun */
.yonetimPanel .yanAlt .mini { width: auto; flex: 1 1 0; }

/* ---------------- Sekmeler (pencere icinde) ---------------- */
.yonetimPanel .sekmeler { border-bottom: 1px solid var(--pCizgi); margin: -2px 0 20px; gap: 0; }
.yonetimPanel .sekme {
    padding: 9px 0; margin: 0 20px -1px 0; font-size: 13px; color: var(--pSoluk);
}
.yonetimPanel .sekme:hover { color: var(--pMetin); }
.yonetimPanel .sekme.secili { color: #fff; border-bottom-color: var(--pKirmizi) !important; }

/* ---------------- Pencereler ---------------- */
.yonetimPanel .perde { background: rgba(5,5,7,.72); }
.yonetimPanel .pencere {
    border-radius: 18px; border: 1px solid var(--pCizgi2);
    background: linear-gradient(180deg, var(--pYuzey2) 0%, var(--pYuzey) 220px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px rgba(0,0,0,.6);
}
.yonetimPanel .pencereBaslik { padding: 17px 22px; border-bottom: 1px solid var(--pCizgi); }
.yonetimPanel .pencereBaslik h3 { font-size: 15px; letter-spacing: -.3px; }
.yonetimPanel .pencereGovde { padding: 22px; }
.yonetimPanel .pencereAlt { padding: 15px 22px; border-top: 1px solid var(--pCizgi); }
.yonetimPanel .formHata, .yonetimPanel .uyari { border-radius: 12px; }

/* ---------------- Dar ekran ---------------- */
@media (max-width: 900px) {
    .yonetimPanel .yanAlt .mini { flex: none; }
    .yonetimPanel .sayfaUst { margin-bottom: 20px; }
    .yonetimPanel .kutu .tabloKap { margin: 0 -18px -20px; }
}
@media (max-width: 620px) {
    .yonetimPanel .istatistikler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yonetimPanel .araclar input[type="search"] { max-width: none; }
    .yonetimPanel .filtreler { width: 100%; justify-content: space-between; }
    .yonetimPanel .pencereGovde { padding: 18px; }
}

/* ===================================================================
   Plus paketi: altin / neon tema
   Ucretsiz kartin yaninda belirgin sekilde ayrissin diye kirmizi vurgu
   yerine altin kullaniliyor; serit, fiyat, isaretler ve satin alma
   dugmesi ayni paleti paylasiyor. Medya sorgularindan SONRA duruyor ki
   .uyePanel / .yonetimPanel ezmelerini de gecsin.
   =================================================================== */
.paketKart.vurgulu,
.uyePanel .paketKart.vurgulu,
.yonetimPanel .paketKart.vurgulu {
    border-color: rgba(245, 185, 69, .55);
    background:
        radial-gradient(120% 72% at 50% -12%, rgba(245, 185, 69, .17) 0%, rgba(245, 185, 69, 0) 62%),
        linear-gradient(180deg, #221d13 0%, #17191c 220px);
    box-shadow:
        0 0 0 1px rgba(245, 185, 69, .20),
        0 0 36px rgba(245, 185, 69, .10),
        0 18px 44px rgba(0, 0, 0, .50);
}

/* Ust kenarda ince altin isik cizgisi (neon his) */
.paketKart.vurgulu::before {
    content: ''; position: absolute; left: 16%; right: 16%; top: -1px; height: 1px;
    background: linear-gradient(90deg, rgba(245,185,69,0), #ffd98a, rgba(245,185,69,0));
}

.paketKart.vurgulu h3,
.uyePanel .paketKart.vurgulu h3,
.yonetimPanel .paketKart.vurgulu h3 { color: #ffd98a; }

.paketKart.vurgulu .serit,
.uyePanel .paketKart.vurgulu .serit,
.yonetimPanel .paketKart.vurgulu .serit {
    background: linear-gradient(90deg, #f5b945, #ffd98a);
    color: #231a07; font-weight: 700;
    box-shadow: 0 0 14px rgba(245, 185, 69, .45);
}

.paketKart.vurgulu .fiyat,
.uyePanel .paketKart.vurgulu .fiyat,
.yonetimPanel .paketKart.vurgulu .fiyat {
    color: #ffd98a; text-shadow: 0 0 20px rgba(245, 185, 69, .30);
}

/* Altin onay isaretleri */
.paketKart.vurgulu li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5b945' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* Satin alma dugmesi */
.paketKart.vurgulu > button.vurgu,
.uyePanel .paketKart.vurgulu > button.vurgu,
.yonetimPanel .paketKart.vurgulu > button.vurgu {
    background: linear-gradient(180deg, #ffd98a 0%, #f5b945 100%);
    border: 1px solid #f5b945; color: #231a07; font-weight: 700;
    box-shadow: 0 6px 22px rgba(245, 185, 69, .30);
}
.paketKart.vurgulu > button.vurgu:hover,
.uyePanel .paketKart.vurgulu > button.vurgu:hover,
.yonetimPanel .paketKart.vurgulu > button.vurgu:hover {
    background: #ffe3a6; border-color: #ffe3a6;
}

/* ===================================================================
   Paket kartlari: daha dar izgara + 3B derinlik
   Iki kart tum genisligi doldurunca cok yayvan duruyordu; izgara
   ortalanip kart genisligi sinirlandi. Derinlik icin katmanli golge
   (temas + orta + uzak), ust kenarda ic isik ve hafif yukselme var.
   =================================================================== */
.paketler {
    grid-template-columns: repeat(auto-fit, minmax(240px, 318px));
    justify-content: center;
    gap: 22px;
    max-width: 700px;
    margin-inline: auto;
    perspective: 1200px;
}

.paketKart,
.uyePanel .paketKart,
.yonetimPanel .paketKart {
    transform: translateZ(0);
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 1px 2px rgba(0,0,0,.40),
        0 8px 16px rgba(0,0,0,.34),
        0 26px 48px rgba(0,0,0,.42);
}
.paketKart:hover,
.uyePanel .paketKart:hover,
.yonetimPanel .paketKart:hover {
    transform: translateY(-5px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 2px 4px rgba(0,0,0,.42),
        0 14px 26px rgba(0,0,0,.38),
        0 38px 64px rgba(0,0,0,.48);
}

/* Plus karti bir tik one cikar: hafif yukselir, altin hale derinlesir */
.paketKart.vurgulu,
.uyePanel .paketKart.vurgulu,
.yonetimPanel .paketKart.vurgulu {
    transform: translateY(-8px);
    box-shadow:
        inset 0 1px 0 rgba(255, 217, 138, .22),
        0 0 0 1px rgba(245, 185, 69, .22),
        0 2px 4px rgba(0,0,0,.45),
        0 14px 28px rgba(0,0,0,.40),
        0 40px 70px rgba(0,0,0,.52),
        0 0 46px rgba(245, 185, 69, .13);
}
.paketKart.vurgulu:hover,
.uyePanel .paketKart.vurgulu:hover,
.yonetimPanel .paketKart.vurgulu:hover {
    transform: translateY(-13px);
    box-shadow:
        inset 0 1px 0 rgba(255, 217, 138, .28),
        0 0 0 1px rgba(245, 185, 69, .30),
        0 3px 6px rgba(0,0,0,.48),
        0 20px 38px rgba(0,0,0,.44),
        0 54px 86px rgba(0,0,0,.56),
        0 0 64px rgba(245, 185, 69, .20);
}

@media (prefers-reduced-motion: reduce) {
    .paketKart, .paketKart:hover { transition: none; }
}