/* ========================================
   0) EventiggLogo – Temel (Light) & Pacman Default
   ======================================== */
:root {
  --pacman-size: 40;          /* px */
  --pacman-color: #FFEB3B;    /* sarı */
  --pacman-bg: transparent;   /* arka plan */
  --pacman-speed: 120;        /* px/s */
  --pacman-mouth-speed: 8;     /* açma/kapama hızı (frame başına derece) */
  --pacman-pellet-size: 6;    /* yiyilecek topların çapı */
  --pacman-pellet-spacing: 20;/* toplar arası mesafe px */
}
.card, .offcanvas-body {
    overflow: visible !important;
}

.modal-header .btn-close {
    width: 2.00rem;
    height: 2.00rem;
    filter: none;
    opacity: 3;
}

.linqlocation-widget, #linqLoc_*, .maplibregl-map {
    overflow: visible !important;
    position: relative;
    z-index: 1000;
}
/* ========================================
   1) Tema Değişkenleri – Temel (Light)
   ======================================== */
:root,
html.theme-light {
    --color-bg: #ffffff;
    --color-text: #212529;
    --color-primary: #0d6efd;
    --color-link-hover: #0b5ed7;
    --color-input-bg: #f8f9fa;
    --color-border: #ced4da;
    --color-error: #dc3545;
    --color-placeholder: rgba(33, 37, 41, 0.6);
    --radius: 0.5rem;
    --font-main: 'Segoe UI', sans-serif;
    --font-size: 1rem;
    --icon-color: #212529;
    --card-bg: #ffffff;
    --card-text: #212529;
    --navbar-bg: #f8f9fa;
    --navbar-text: #212529;
    --sidebar-bg: #ffffff;
    --sidebar-text: #212529;
    --pacman-color: var(--color-primary); /* örn: #0d6efd */
    --pacman-bg: var(--color-bg); /* #ffffff */
}

/* ========================================
   2) Tema Varyasyonları
   ======================================== */
html.theme-dark {
    --color-bg: #1e1e2e;
    --color-text: #e0e0e0;
    --color-primary: #66b2ff;
    --color-link-hover: #5599dd;
    --color-input-bg: #2a2a3a;
    --color-border: #444444;
    --color-error: #ff6b6b;
    --color-placeholder: rgba(224, 224, 224, 0.5);
    --icon-color: #e0e0e0;
    --card-bg: #2a2a3a;
    --card-text: #e0e0e0;
    --navbar-bg: #1b1b2f;
    --navbar-text: #e0e0e0;
    --sidebar-bg: #1c1c2e;
    --sidebar-text: #e0e0e0;
    --pacman-color: var(--color-primary); /* örn: #0d6efd */
    --pacman-bg: var(--color-bg); /* #ffffff */
}

html.theme-solarized {
    --color-bg: #fdf6e3;
    --color-text: #657b83;
    --color-primary: #268bd2;
    --color-link-hover: #00629d;
    --color-input-bg: #eee8d5;
    --color-border: #93a1a1;
    --color-error: #dc322f;
    --color-placeholder: rgba(101, 123, 131, 0.5);
    --icon-color: #657b83;
    --card-bg: #eee8d5;
    --card-text: #657b83;
    --navbar-bg: #eee8d5;
    --navbar-text: #657b83;
    --sidebar-bg: #fdf6e3;
    --sidebar-text: #657b83;
    --pacman-color: var(--color-primary); /* örn: #0d6efd */
    --pacman-bg: var(--color-bg); /* #ffffff */
}

html.theme-retro {
    --color-bg: #fcf8e3;
    --color-text: #4e342e;
    --color-primary: #795548;
    --color-link-hover: #5d4037;
    --color-input-bg: #fff3e0;
    --color-border: #a1887f;
    --color-error: #d32f2f;
    --color-placeholder: rgba(78, 52, 46, 0.5);
    --icon-color: #4e342e;
    --card-bg: #fff3e0;
    --card-text: #4e342e;
    --navbar-bg: #fbe9e7;
    --navbar-text: #4e342e;
    --sidebar-bg: #fcf8e3;
    --sidebar-text: #4e342e;
    --pacman-color: var(--color-primary); /* örn: #0d6efd */
    --pacman-bg: var(--color-bg); /* #ffffff */
}

html.theme-neon {
    --color-bg: #0f0f0f;
    --color-text: #39ff14;
    --color-primary: #39ff14;
    --color-link-hover: #2ecc71;
    --color-input-bg: #1a1a1a;
    --color-border: #39ff14;
    --color-error: #ff073a;
    --color-placeholder: rgba(57, 255, 20, 0.4);
    --icon-color: #39ff14;
    --card-bg: #1a1a1a;
    --card-text: #39ff14;
    --navbar-bg: #111111;
    --navbar-text: #39ff14;
    --sidebar-bg: #0f0f0f;
    --sidebar-text: #39ff14;
    --pacman-color: var(--color-primary); /* örn: #0d6efd */
    --pacman-bg: var(--color-bg); /* #ffffff */
}

/* ========================================
   3) Genel Stil Kuralları
   ======================================== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: var(--font-size);
    transition: background-color .3s, color .3s;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color .2s;
}

    a:hover {
        color: var(--color-link-hover);
        text-decoration: underline;
    }

/* ========================================
   4) Navbar
   ======================================== */
.navbar {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
}

    .navbar .navbar-brand,
    .navbar .nav-link {
        color: var(--navbar-text) !important;
    }

/* ========================================
   5) Offcanvas / Sidebar
   ======================================== */
.offcanvas {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

    .offcanvas .offcanvas-header,
    .offcanvas .offcanvas-title {
        color: var(--sidebar-text) !important;
    }

    .offcanvas .list-group-item {
        background-color: var(--sidebar-bg) !important;
        color: var(--sidebar-text) !important;
        border: none;
        transition: background-color .2s;
    }

        .offcanvas .list-group-item:hover {
            background-color: var(--color-input-bg) !important;
        }

    /* Offcanvas close button */
    .offcanvas .btn-close {
        filter: none !important;
        color: var(--icon-color) !important;
        opacity: 1;
    }

        .offcanvas .btn-close:focus {
            box-shadow: none;
            outline: none;
        }

/* ========================================
   6) Form Elemanları
   ======================================== */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background-color: var(--color-input-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    width: 100%;
    box-sizing: border-box;
    transition: background-color .3s, color .3s, border-color .3s;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

::placeholder {
    color: var(--color-placeholder);
    opacity: 1;
}

label,
.form-text {
    color: var(--color-text);
}

.text-danger {
    color: var(--color-error) !important;
}

.form-bg {
    background-color: var(--card-bg);
    color: var(--card-text);
    border-radius: var(--radius);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    padding: 1.5rem;
    transition: background-color .3s, color .3s;
}

/* ========================================
   7) Butonlar
   ======================================== */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    transition: opacity .2s;
}

    .btn-primary:hover {
        opacity: .9;
    }

/* ========================================
   8) Kartlar / Paneller
   ======================================== */
.card {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.05) !important;
}

/* ========================================
   9) Modal / Dropdown
   ======================================== */
.modal-content {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

.dropdown-menu {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

/* ========================================
   10) İkonlar
   ======================================== */
.bi {
    color: var(--icon-color) !important;
}


/* ========================================
   Offcanvas Close Icon Custom Color
   ======================================== */
.btn-close {
    background-image: none !important;
    color: var(--color-close-icon) !important;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    padding: 0.5rem;
}

    .btn-close::before {
        content: '\00d7';
        font-weight: bold;
    }

    .btn-close:focus {
        outline: none;
        box-shadow: none;
    }