/* ===========================================================================
   SATICI KOMISYON ORANLARI SAYFASI (08.09.2026, Hakan gorev 784b9022)

   /iletisim ile ayni kurumsal kabuk: kok eleman .kurumsalSayfa tokenlarini
   (--ku*, css/kurumsal-sekmeler.css) kullanir, ustte yatay sekme seridi basar.
   Oranlar sayfaya GOMULU DEGIL: Controller PlayerMarketSellerType +
   PlayerMarketCategoryCommissionRate tablolarindan canli okur. JS YOK:
   kategori secimi duz GET formu ile calisir.
   =========================================================================== */
.skoSayfa { color: var(--kuMetin); padding-bottom: 90px; }

/* Hero */
.skoHero {
    padding-top: 40px; padding-bottom: 8px; display: flex; flex-direction: column;
    gap: 14px; align-items: center; text-align: center; max-width: 760px; margin: 0 auto;
}
.skoEtiket { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--kuNane); text-transform: uppercase; }
.skoHero h1 { font-size: 44px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.05; color: var(--kuBaslik); margin: 0; }
.skoHero p { font-size: 15px; line-height: 1.65; color: var(--kuUcuncul); margin: 0; }

/* Kategori formu */
.skoForm {
    max-width: 560px; margin: 32px auto 0; display: flex; gap: 12px; align-items: center;
}
.skoFormLabel {
    font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--kuUcuncul);
    text-transform: uppercase; white-space: nowrap;
}
.skoSelect {
    flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--kuKenar); background: var(--kuKart); color: var(--kuMetin);
    font-size: 14px; font-weight: 600;
}
.skoButon {
    height: 44px; padding: 0 22px; flex: none; border-radius: 10px; border: 1px solid transparent;
    background: var(--kuNane); color: var(--kuNaneUstu); font-size: 13px; font-weight: 800;
    white-space: nowrap; cursor: pointer; transition: background .16s;
}
.skoButon:hover { background: var(--kuNaneHover); }
.skoButon:focus-visible, .skoSelect:focus-visible { outline: 2px solid var(--kuNane); outline-offset: 2px; }

/* Kademe tablosu */
.skoKart { background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 16px; box-shadow: var(--kuKartGolge); }
.skoTabloKart { margin-top: 28px; max-width: 720px; margin-left: auto; margin-right: auto; overflow: hidden; }
.skoTablo { width: 100%; border-collapse: collapse; }
.skoTablo th, .skoTablo td { padding: 16px 22px; text-align: left; font-size: 14px; }
.skoTablo thead th {
    font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--kuUcuncul); border-bottom: 1px solid var(--kuKenar); background: var(--kuBant);
}
.skoTablo tbody tr:not(:last-child) td { border-bottom: 1px solid var(--kuInceKenar); }
.skoTablo td { color: var(--kuMetin); font-weight: 600; font-variant-numeric: tabular-nums; }
.skoSeviye { display: flex; align-items: center; gap: 10px; }
.skoRozet { width: 26px; height: 26px; object-fit: contain; flex: none; }
.skoSeviyeMetin { display: flex; flex-direction: column; gap: 2px; }
.skoSeviyeMetin strong { font-weight: 700; color: var(--kuBaslik); }
.skoSeviyeMetin small { font-size: 12px; font-weight: 500; color: var(--kuUcuncul); }

/* Alt not */
.skoNot { max-width: 720px; margin: 16px auto 0; font-size: 12.5px; line-height: 1.6; color: var(--kuUcuncul); text-align: center; }

/* ---- Mobil ---------------------------------------------------------- */
@media (max-width: 991.98px) {
    .skoHero { padding-top: 28px; gap: 10px; }
    .skoHero h1 { font-size: 30px; letter-spacing: -.8px; line-height: 1.1; }
    .skoHero p { font-size: 13.5px; }
    .skoForm { flex-wrap: wrap; margin-top: 24px; }
    .skoFormLabel { width: 100%; }
    .skoSelect { width: 100%; }
    .skoButon { width: 100%; }
    .skoTabloKart { margin-top: 20px; }
    .skoTablo th, .skoTablo td { padding: 12px 14px; font-size: 13px; }
    .skoRozet { width: 22px; height: 22px; }
}