/*
 * 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ı sekmeleri referansın `ul.sportsbook__desktop-nav` haplarıdır (beyaz çerçeve, 20px yarıçap, logo `img`,
 * pasif opacity .4). Beş sağlayıcı için tek satır: masaüstünde sola yaslı sabit genişlik, telefonda yatay kaydırma
 * (referanstaki "Sağlayıcı Değiştir" listesi yerine — sekme sayısı arttığı için). Seçili sekme MR KING altını (#ebb058).
 * Logo yoksa metin etiketi (`.sportsbook__provider-name`).
 */
/* app.css kuralları `[data-v-0c11df00]` kapsamlı (grid, li opacity .4, img aspect-ratio 6/1) → aynı kapsamla ezilir */
.sportsbook__provider-nav[data-v-0c11df00]{display:flex;gap:.4rem;overflow-x:auto;padding:.4rem .5rem;scroll-snap-type:x proximity;scrollbar-width:none}
.sportsbook__provider-nav[data-v-0c11df00]::-webkit-scrollbar{display:none}
.sportsbook__provider-nav li[data-v-0c11df00]{display:block;flex:0 0 190px;scroll-snap-align:start;transition:opacity .2s,border-color .2s,box-shadow .2s}
.sportsbook__provider-nav--m li[data-v-0c11df00]{flex-basis:128px;height:38px}
.sportsbook__provider-nav li[data-v-0c11df00]:hover{opacity:.75}
.sportsbook__provider-nav li.active[data-v-0c11df00]{border-color:#ebb058;box-shadow:0 0 0 1px #ebb058,0 0 10px rgba(235,176,88,.45);opacity:1}
.sportsbook__provider-nav li a[data-v-0c11df00]{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:.4rem .9rem}
.sportsbook__provider-nav li a img[data-v-0c11df00]{aspect-ratio:auto;height:24px;max-width:100%;object-fit:contain;width:auto}
.sportsbook__provider-nav li a img[src$=".png"][data-v-0c11df00]{height:30px}
.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}