/* MarSell çerez bildirimi (banner + tercih penceresi) — tüm sitelerde aynı dosya.
   Renkler view'da satır içi CSS değişkeni olarak gelir: --mc-primary, --mc-on-primary, --mc-dark, --mc-banner
   (appsettings.json -> "Cookie": PrimaryColor, PrimaryTextColor, DarkColor, isteğe bağlı BannerColor). */

#cookie-banner, #cookie-preferences {
    --mc-text: #2d3239;
    font-family: inherit;
}
/* Banner markanın kendi renginde: zemin = BannerColor (yoksa PrimaryColor), yazı = PrimaryTextColor,
   üst çizgi = DarkColor. Birincil düğme ters renk (yazı rengi zeminli), ikincil düğme çerçeveli. */
.mc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; background: var(--mc-banner, var(--mc-primary)); color: var(--mc-on-primary); border-top: 4px solid var(--mc-dark); box-shadow: 0 -6px 24px rgba(0,0,0,.25); }
.mc-banner__inner { max-width: 1200px; margin: 0 auto; padding: 18px 16px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.mc-banner__text { flex: 1 1 480px; font-size: 14px; line-height: 1.6; color: var(--mc-on-primary); }
.mc-banner__text > div { opacity: .92; }
.mc-banner__text strong { display: block; margin-bottom: 4px; font-size: 16px; color: var(--mc-on-primary); letter-spacing: .2px; }
.mc-banner__link { color: var(--mc-on-primary) !important; text-decoration: underline; text-underline-offset: 3px; display: inline-block; margin-top: 6px; font-weight: 600; }
.mc-banner__link:hover { color: var(--mc-on-primary) !important; opacity: .8; }
.mc-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-btn { border: 2px solid var(--mc-primary); background: #fff; color: var(--mc-dark); padding: 9px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.2; transition: background .2s, color .2s, border-color .2s, filter .2s; }
.mc-btn:hover { background: var(--mc-primary); color: var(--mc-on-primary); }
.mc-btn--primary { background: var(--mc-primary); color: var(--mc-on-primary); }
.mc-btn--primary:hover { background: var(--mc-primary); color: var(--mc-on-primary); filter: brightness(.9); }
.mc-banner .mc-btn--primary { background: var(--mc-on-primary); color: var(--mc-banner, var(--mc-primary)); border-color: var(--mc-on-primary); }
.mc-banner .mc-btn--primary:hover { background: var(--mc-on-primary); color: var(--mc-banner, var(--mc-primary)); border-color: var(--mc-on-primary); filter: brightness(.92); }
.mc-banner .mc-btn:not(.mc-btn--primary) { background: transparent; color: var(--mc-on-primary); border-color: var(--mc-on-primary); }
.mc-banner .mc-btn:not(.mc-btn--primary):hover { background: var(--mc-on-primary); color: var(--mc-banner, var(--mc-primary)); border-color: var(--mc-on-primary); }

.mc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mc-modal[hidden], .mc-banner[hidden] { display: none; }
.mc-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.mc-modal__box { position: relative; background: #fff; color: var(--mc-text); border-radius: 6px; max-width: 560px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 0 24px 24px; border-top: 6px solid var(--mc-primary); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.mc-modal__box h4 { margin: 0 -24px 16px; padding: 18px 24px; background: #f5f6f8; color: var(--mc-dark); font-size: 18px; font-weight: 700; border-bottom: 1px solid #e6e9ee; }
.mc-modal__box > p { font-size: 14px; line-height: 1.6; color: var(--mc-text); }
.mc-cat { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid #e9eef3; cursor: pointer; margin: 0; }
/* Tema checkbox'ları gizlediği için kendi anahtarımızı (switch) çiziyoruz; !important tema kurallarını ezer */
.mc-cat input[type="checkbox"].mc-switch {
    -webkit-appearance: none !important; appearance: none !important;
    display: inline-block !important; position: relative !important; left: auto !important; top: auto !important;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    width: 42px !important; height: 24px !important; min-width: 42px; margin: 2px 0 0 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 12px !important; background: #c5ced8 !important;
    cursor: pointer; flex: 0 0 42px; transition: background .2s; outline: none; box-shadow: none !important;
}
.mc-cat input[type="checkbox"].mc-switch::before {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s;
}
.mc-cat input[type="checkbox"].mc-switch::after { display: none !important; }
.mc-cat input[type="checkbox"].mc-switch:checked { background: var(--mc-primary) !important; }
.mc-cat input[type="checkbox"].mc-switch:checked::before { left: 21px; }
.mc-cat input[type="checkbox"].mc-switch:disabled { opacity: .6 !important; cursor: not-allowed; }
.mc-cat input[type="checkbox"].mc-switch:focus-visible { outline: 2px solid var(--mc-dark) !important; outline-offset: 2px; }
.mc-cat b { display: block; margin-bottom: 2px; color: var(--mc-dark); font-size: 15px; }
.mc-cat small { display: block; color: #5f6b77; font-size: 13px; line-height: 1.5; }
.mc-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e9eef3; flex-wrap: wrap; }

@media (max-width: 575px) {
    .mc-banner__actions, .mc-modal__actions { width: 100%; }
    .mc-banner__actions .mc-btn, .mc-modal__actions .mc-btn { flex: 1 1 auto; }
}