/*
 * MR KING — app.css'te OLMAYAN ama referansta çalışma anında üçüncü parti kütüphanelerin
 * enjekte ettiği kurallar. app.css DEĞİŞTİRİLMEZ; eksikler buraya, bölüm bölüm eklenir.
 * Yalnız EKLEME yapın; başka bölümü değiştirmeyin.
 */

/* ===================================================================== auth
 * vuejs-datepicker varsayılan stilleri (kütüphane bileşeni kendi <style>'ını enjekte eder; app.css'te yok).
 * Kayıt sayfası doğum tarihi takvimi (AuthDate) bunlara dayanır; renk/ölçü özelleştirmeleri app.css'teki
 * `.auth-date__calendar.vdp-datepicker__calendar …` kurallarıyla ezilir.
 */
.vdp-datepicker{position:relative;text-align:left}
.vdp-datepicker *{box-sizing:border-box}
.vdp-datepicker__calendar{position:absolute;z-index:100;background:#fff;width:300px;border:1px solid #ccc}
.vdp-datepicker__calendar header{display:block;line-height:40px}
.vdp-datepicker__calendar header span{display:inline-block;text-align:center;width:71.42857142857143%;float:left}
.vdp-datepicker__calendar header .prev,.vdp-datepicker__calendar header .next{width:14.285714285714286%;float:left;text-indent:-10000px;position:relative}
.vdp-datepicker__calendar header .prev:after,.vdp-datepicker__calendar header .next:after{content:"";position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);border:6px solid transparent}
.vdp-datepicker__calendar header .prev:after{border-right:10px solid #000;margin-left:-5px}
.vdp-datepicker__calendar header .prev.disabled:after{border-right:10px solid #ddd}
.vdp-datepicker__calendar header .next:after{border-left:10px solid #000;margin-left:5px}
.vdp-datepicker__calendar header .next.disabled:after{border-left:10px solid #ddd}
.vdp-datepicker__calendar header .prev:not(.disabled),.vdp-datepicker__calendar header .next:not(.disabled),.vdp-datepicker__calendar header .up:not(.disabled){cursor:pointer}
.vdp-datepicker__calendar header .prev:not(.disabled):hover,.vdp-datepicker__calendar header .next:not(.disabled):hover,.vdp-datepicker__calendar header .up:not(.disabled):hover{background:#eee}
.vdp-datepicker__calendar .disabled{color:#ddd;cursor:default}
.vdp-datepicker__calendar .cell{display:inline-block;padding:0 5px;width:14.285714285714286%;height:40px;line-height:40px;text-align:center;vertical-align:middle;border:1px solid transparent}
.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer}
.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #4bd}
.vdp-datepicker__calendar .cell.selected{background:#4bd}
.vdp-datepicker__calendar .cell.selected:hover{background:#4bd}
.vdp-datepicker__calendar .cell.highlighted{background:#cae5ed}
.vdp-datepicker__calendar .cell.grey{color:#888}
.vdp-datepicker__calendar .cell.day-header{font-size:75%;white-space:nowrap;cursor:inherit}
.vdp-datepicker__calendar .cell.day-header:hover{background:inherit}
.vdp-datepicker__calendar .month,.vdp-datepicker__calendar .year{width:33.333%}

/*
 * vue-toasted taban stilleri (kütüphane enjekte eder; app.css yalnız .app-toast görünümünü ve
 * .toasted-container.bottom-left konumunu veriyor). mkToast() (src/components/mk/auth/toast.ts) kullanır.
 */
.toasted-container{position:fixed;z-index:10000;display:flex;flex-direction:column}
.toasted-container.bottom-left{left:0;bottom:calc(env(safe-area-inset-bottom) + 2rem);align-items:flex-start}
@media (min-width:1024px){.toasted-container.bottom-left{left:1rem}}
.toasted-container .toasted{position:relative;display:flex;align-items:center;margin-top:.5rem;min-height:38px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);word-break:normal;animation:mk-toast-in .3s ease}
@keyframes mk-toast-in{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}

/* ===================================================================== shell
 * Eski KlasRoyal globals.css `body{font-family:Urbanist…;letter-spacing:-.003em;background:var(--bg);color:var(--text)}`
 * ve `html,body{overflow-x:clip}` kuralları app.css'teki taban tipografiyi ve kaydırma düzenini (body taşması viewport'a
 * yayılır, 4px özel kaydırma çubuğu) (html Titillium Web, body #091840/#fff, harf aralığı normal) eziyor.
 * Referansta body bu değerleri app.css'ten alır; yalnız MR KING kökü olan sayfalarda geri yüklenir.
 * (globals.css koordinatörde; bu kural oradaki çakışma kaldırılınca silinebilir.)
 */
html:has(#layout--default){background-color:#091840;overflow-x:visible}
body:has(#layout--default){background-color:#091840;color:#fff;font-family:Titillium Web,sans-serif;letter-spacing:normal;line-height:normal;overflow-x:hidden}

/* ===================================================================== home
 * Tailwind preflight (globals.css, @layer base) referansta olmayan iki taban kuralı getiriyor; app.css tarayıcı
 * varsayılanlarını varsayar:
 *  1) h1–h6 `font-weight:inherit` → referansta bold (ör. `.awards h2`, `.home__text h2`, `.partners h2` 700).
 *  2) img/svg/video/iframe `display:block` → referansta inline (ör. turnuva kartı `.image-container` görsel
 *     altındaki satır boşluğu: telefonda 120.2 → 125.7 px).
 * Katmansız + sıfır özgüllüklü (:where) olduğu için preflight'ı yener, app.css'teki açık kurallara yenilir.
 * Şimdilik `.home` ile sınırlı; tüm site için geçerli olmalı (koordinatöre bildirildi).
 */
:where(.home) :where(h1,h2,h3,h4,h5,h6){font-weight:bold}
:where(.home) :where(img,svg,video,canvas,iframe,embed,object){display:inline;vertical-align:baseline}

/* ===================================================================== wallet
 * Tailwind'in `.hidden{display:none}` yardımcı sınıfı (globals.css) referans InputAmount'un gizli
 * `type=number` girişini tamamen kaldırıyor. Referansta bu giriş yerinde kalır, app.css onu
 * `.input-amount input.hidden{position:absolute;z-index:-1;color:transparent}` ile arkaya alır.
 */
.input-amount input.hidden{display:inline-block}
/* mk-reset.css'teki `border-width: revert` iframe'in `frameborder="0"` sunum ipucunu da atlayıp tarayıcı
 * varsayılanına (2px inset) döndürüyor; referansta yöntem videosu iframe'i kenarsızdır. */
.method-video iframe{border:0}

/* ===================================================================== shell-li (girişli kabuk)
 * AppModal (common) body'ye portal ile basılır → `#layout--default` dışında kalır ve mk-reset.css'in
 * Tailwind preflight nötrleyicisi modallara uygulanmaz (ör. Discount modalı `h2.cashback-modal__title`
 * referansta 700, bizde preflight `font-weight:inherit` yüzünden 400). mk-reset kurallarının aynısı
 * `.app-modal` kapsamında; :where() ile özgüllük 0, app.css'teki her açık kurala yenilir.
 */
:where(.app-modal) :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
:where(.app-modal) :where(img, video) { max-width: revert; height: revert; }
:where(.app-modal) :where(*, ::before, ::after) { border-width: revert; border-style: revert; border-color: revert; }
:where(.app-modal) :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
:where(.app-modal) :where(ol, ul, menu) { list-style: revert; }
:where(.app-modal) :where(a) { color: revert; text-decoration: revert; }
:where(.app-modal) :where(button, input, select, optgroup, textarea) { font: revert; letter-spacing: revert; color: revert; background-color: revert; border-radius: revert; }

/* ===================================================================== account (hesap paneli)
 * Tailwind'in `.collapse{visibility:collapse}` yardımcı sınıfı (globals.css) hesap menüsündeki açık alt menü
 * okunu (`i.icon-play.collapse`, referans `rotate(90deg)` + beyaz) görünmez yapıyor. Referansta bu sınıf
 * yalnız app.css'teki `.user__menu … i.icon-play.collapse` kuralını tetikler.
 */
.user__menu i.icon-play.collapse{visibility:visible}

/* ===================================================================== sport (spor sayfası, /sportsbook/…)
 * Sağlayıcı seçici referansla birebir: masaüstü `ul.sportsbook__desktop-nav` (eşit sütun, tam genişlik), telefon
 * `ul.sportsbook__mobile-nav` + "Sağlayıcı Değiştir" penceresi (`.sportsbook-options`) — kurallar app.css'te.
 * Logo yoksa metin etiketi (`.sportsbook__provider-name`).
 */
.sportsbook__provider-name{align-items:center;color:#fff;display:flex;font-size:.8rem;font-weight:700;height:100%;justify-content:center;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}