::-moz-selection { /* Code for Firefox */
color: white;
background: var(--mg-primary);
}
::selection {
color: white;
background: var(--mg-primary);
}
body {
font-family: "Poppins-Regular", sans-serif;
color: #444444;
}
a {
text-decoration: none;
color: var(--mg-primary);
}
a:hover {
color: var(--mg-primary-2);
text-decoration: none;
}
#main {
position: relative;
top: 60px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Alkatra-VariableFont_wght", sans-serif;
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #1a1814;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #1a1814;
border-top-color: var(--mg-primary);
border-bottom-color: var(--mg-primary);
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
width: 44px;
height: 44px;
border-radius: 50px;
transition: all 0.4s;
border: 2px solid var(--mg-primary);
}
.back-to-top i {
font-size: 28px;
color: var(--mg-primary);
line-height: 0;
}
.back-to-top:hover {
background: var(--mg-primary);
color: #1a1814;
}
.back-to-top:hover i {
color: #444444;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
#topbar {
padding: 0;
font-size: 14px;
height: 30px;
transition: all 0.5s;
z-index: 996;
color: rgba(255, 255, 255, 0.7);
}
#topbar.topbar-transparent {
background: transparent;
}
#topbar.topbar-scrolled {
top: -50px;
}
#topbar i {
color: var(--mg-primary);
line-height: 0;
}
#topbar i span {
color: #000;
font-style: normal;
padding-left: 5px;
}
#topbar .languages ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
color: var(--mg-primary);
}
#topbar .languages ul a {
color: white;
}
#topbar .languages ul li + li {
padding-left: 10px;
}
#topbar .languages ul li + li::before {
display: inline-block;
padding-right: 10px;
color: rgba(255, 255, 255, 0.5);
content: "/";
}
#header {
top: 30px;
height: 60px;
z-index: 997;
transition: all 0.5s;
padding: 10px 0;
background: rgba(26, 24, 22, 0.8);
border-bottom: 1px solid rgba(12, 11, 9, 0.6);
}
#header.header-scrolled {
top: 0;
background: rgba(26, 24, 22, 0.85);
}
#header .logo h1 {
font-size: 28px;
margin: 0;
line-height: 1;
font-weight: 400;
letter-spacing: 3px;
color: var(--mg-primary);
}
#header .logo h1 a,
#header .logo h1 a:hover {
color: #ffffff;
text-decoration: none;
}
#header .logo img {
padding: 0;
margin: 0;
max-height: 40px;
}
.book-a-table-btn {
margin: 0 0 0 15px;
border: 2px solid var(--mg-primary);
color: #fff;
border-radius: 50px;
padding: 4px 13px;
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
letter-spacing: 1px;
transition: 0.3s;
}
.book-a-table-btn:hover {
background: var(--mg-primary);
color: #fff;
}
@media (max-width: 992px) {
.book-a-table-btn {
margin: 0 15px 0 0;
padding: 8px 20px;
}
}
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 24px;
font-size: 15px;
font-weight: 500;
color: #fff;
white-space: nowrap;
transition: 0.3s;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
color: var(--mg-primary);
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 24px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 4px;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 14px;
font-weight: 400;
color: #433f39;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
color: var(--mg-primary);
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
@media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
.mobile-nav-toggle {
color: #ffffff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
@media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(39, 37, 34, 0.9);
transition: 0.3s;
z-index: 0;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 8px;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a,
.navbar-mobile a:focus {
padding: 10px 20px;
font-size: 15px;
color: #433f39;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
color: var(--mg-primary);
}
.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
color: var(--mg-primary);
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
section {
padding: 60px 0;
}
.section-bg {
background-color: white;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
margin: 15px 0 0 0;
font-size: 32px;
font-weight: 700;
color: #5f5950;
}
.section-title h2 span {
color: var(--mg-primary);
}
.section-title p {
margin: 15px auto 0 auto;
font-weight: 300;
}
@media (min-width: 1024px) {
.section-title p {
width: 50%;
}
}
.menu #menu-flters {
padding: 0;
margin: 0 auto 0 auto;
list-style: none;
text-align: center;
border-radius: 50px;
}
.menu #menu-flters li {
cursor: pointer;
display: inline-block;
padding: 8px 16px 10px 16px;
font-size: 14px;
font-weight: 500;
line-height: 1;
color: #444444;
margin: 0 3px 10px 3px;
transition: all ease-in-out 0.3s;
background: #fff;
border: 2px solid var(--mg-primary);
border-radius: 50px;
}
.menu #menu-flters li:hover,
.menu #menu-flters li.filter-active {
color: #fff;
background: var(--mg-primary);
}
.menu #menu-flters li:last-child {
margin-right: 0;
}
.menu .menu-content {
margin-top: 30px;
overflow: hidden;
display: flex;
justify-content: space-between;
position: relative;
margin-left: 79px;
}
.menu .menu-content::after {
content: "......................................................................""....................................................................""....................................................................";
position: absolute;
left: 20px;
right: 0;
top: -4px;
z-index: 1;
color: #dad8d4;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.menu .menu-content a {
padding-right: 10px;
background: #fff;
position: relative;
z-index: 3;
font-weight: 700;
color: var(--mg-primary);
}
.menu .menu-content a:hover {
color: #e1b15f;
}
.menu .menu-content span {
background: #fff;
position: relative;
z-index: 3;
padding: 0 10px;
font-weight: 600;
}
.menu .menu-content span:hover {
color: #e1b15f;
}
.menu .menu-ingredients {
font-size: 14px;
font-family: "ComicNeue-LightItalic", sans-serif;
color: black;
margin-left: 78px;
margin-right: 10px;
text-align: justify;
}
.menu .menu-explanation {
font-size: 11px;
font-family: "ComicNeue-LightItalic", sans-serif;
text-align: justify;
/*Like a pe-5. pe-5 is 3 rem*/
padding-top: 0.1rem;
margin-left: 79px;
margin-right: 10px;
text-align: justify;
}
.menu .menu-img {
height: 70px;
border-radius: 100%;
float: left;
position: relative;
top: 1rem;
border: 3px solid #484645;
margin-right: 10px;
}
.book-a-table .email-form {
width: 100%;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
padding: 30px;
background: #fff;
}
.book-a-table .email-form .form-group {
padding-bottom: 8px;
}
.book-a-table .email-form .validate {
display: none;
color: red;
margin: 0 0 15px 0;
font-weight: 400;
font-size: 13px;
}
.book-a-table .email-form .error-message {
display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
font-weight: 600;
}
.book-a-table .email-form .error-message br + br {
margin-top: 25px;
}
.book-a-table .email-form .sent-message {
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
font-weight: 600;
}
.book-a-table .email-form .loading {
display: none;
background: #fff;
text-align: center;
padding: 15px;
}
.book-a-table .email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
.book-a-table .email-form input,
.book-a-table .email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
}
.book-a-table .email-form input {
height: 44px;
}
.book-a-table .email-form textarea {
padding: 10px 12px;
}
.book-a-table .email-form button[type=submit] {
background: var(--mg-primary);
border: 0;
padding: 10px 24px;
color: #fff;
transition: 0.4s;
border-radius: 50px;
}
.book-a-table .email-form button[type=submit]:hover {
background: #e1b15f;
}
.book-a-table .email-form input::-moz-placeholder,
.book-a-table .email-form textarea::-moz-placeholder {
color: #a49b89;
}
.book-a-table .email-form input::placeholder,
.book-a-table .email-form textarea::placeholder {
color: #a49b89;
}
.book-a-table .email-form input:focus,
.book-a-table .email-form textarea:focus {
border-color: var(--mg-primary);
}
#contact { display: none; }
@media (min-width: 992px) {
#contact { display: block; }
}
.contact .info-wrap {
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
padding: 12px 40px;
}
.mg-about {
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: var(--mg-radius);
box-shadow: var(--mg-shadow);
padding: 16px 20px;
margin-bottom: 18px;
text-align: center;
}
.mg-about-head {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-bottom: 8px;
color: var(--mg-primary);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mg-about-head i {
font-size: 14px;
}
.mg-about-text {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--mg-text-soft);
}
.contact .info {
background: #fff;
}
.contact .info > i {
font-size: 17px;
color: var(--mg-primary);
float: left;
width: 36px;
height: 36px;
background: #fff6e8;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
transition: all 0.3s ease-in-out;
flex-shrink: 0;
}
.contact .info h4 {
padding: 0 0 0 12px;
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
color: #433f39;
font-family: "Poppins-Light", sans-serif;
}
.contact .info p {
padding: 0 0 0 12px;
margin-bottom: 0;
font-size: 13px;
color: #7a7368;
}
.contact .info:hover > i {
background: var(--mg-primary);
color: #fff;
}
.contact .email-form {
width: 100%;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
padding: 30px;
background: #fff;
}
.contact .email-form .form-group {
padding-bottom: 8px;
}
.contact .email-form .error-message {
display: none;
color: #fff;
background: #dc3545; /* BS Danger rerk kodu ekledin.*/
text-align: center;
padding: 15px;
font-weight: 600;
}
.contact .email-form .sent-message {
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
font-weight: 600;
}
.contact .email-form .loading {
display: none;
background: #fff;
text-align: center;
padding: 15px;
}
.contact .email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
.contact .email-form input,
.contact .email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
border-color: #625b4b;
color: #1a1814;
}
.contact .email-form input {
height: 44px;
}
.contact .email-form textarea {
padding: 10px 12px;
resize: none;
}
.contact .email-form label {
color: #1a1814;
font-size: 0.7rem;
}
.contact .map iframe {
border: 0;
width: 100%;
height: 350px;
border: 0;
filter: var(--mg-map-filter);
transition: filter .3s ease;
}
.contact .email-form input::-moz-placeholder,
.contact .email-form textarea::-moz-placeholder {
color: #a49b89;
}
.contact .email-form input::placeholder,
.contact .email-form textarea::placeholder {
color: #a49b89;
}
.contact .email-form input:focus,
.contact .email-form textarea:focus {
border-color: var(--mg-primary);
}
.contact .email-form button[type=submit] {
background: var(--mg-primary);
border: 0;
padding: 10px 24px;
color: #fff;
transition: 0.4s;
border-radius: 50px;
}
.contact .email-form button[type=submit]:hover {
background: #e1b15f;
}
@-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#footer {
background: #35322d;
color: #fff;
font-size: 13px;
text-align: center;
padding: 20px 0 14px;
margin-top: var(--mg-list-edge-gap);
}
#footer h3, #footer h4, #footer h5 {
font-weight: 700;
color: var(--mg-primary);
position: relative;
padding: 0;
margin: 0 0 6px 0;
font-size: 18px;
}
#footer p {
font-size: 13px;
font-style: italic;
padding: 0;
margin: 0 0 10px 0;
color: rgba(255, 255, 255, .85);
}
#footer .social-links {
margin: 0 0 10px 0;
}
#footer .social-links a {
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #46423b;
color: #fff;
margin-right: 4px;
border-radius: 50%;
width: 30px;
height: 30px;
transition: 0.3s;
}
#footer .social-links a:hover {
background: var(--mg-primary);
}
#footer .copyright {
margin: 0 0 2px 0;
font-size: 12px;
}
#footer .credits {
font-size: 11px;
opacity: .75;
}
@media (max-width: 991px) {
#footer h3, #footer h4, #footer h5 {
margin-bottom: 3px;
}
#footer .social-links {
margin-bottom: 5px;
}
#footer p,
#footer .copyright {
margin-bottom: 1px;
}
}
.link-black-ozel {
color: black;
}
.link-ozel {
color: #7a7368;
}
.withlogo {
font-weight: 400;
letter-spacing: 3px;
color: var(--mg-primary);
color: white;
font-family: 'Alkatra-VariableFont_wght';
}
#menu .container {
max-width: 100% !important;
padding-left: var(--mg-menu-pad-x) !important;
padding-right: var(--mg-menu-pad-x) !important;
}
#mgCats { order: 4 !important; flex: 0 0 100% !important; }
@media (min-width: 992px) {
#mgCats { order: 100 !important; margin-bottom: -12px !important; }
}
.mg-cat-label { font-family: "Alkatra-VariableFont_wght", sans-serif !important; }
#mgCats button .mg-cat-label,
#mgCats button.mg-cat .mg-cat-label,
#mgCats button.is-active .mg-cat-label {
color: #fff !important;
text-shadow: 0 1px 4px rgba(0,0,0,.7) !important;
}
#topbar {
display: none !important;
}
#header {
display: none !important;
}
#main {
top: 0 !important;
}
section#menu.menu {
padding-top: 0 !important;
padding-bottom: 0;
}
::selection {
background: rgba(45,106,79,.25);
color: var(--mg-text);
}
::-moz-selection {
background: rgba(45,106,79,.25);
color: var(--mg-text);
}
html, body {
background: var(--mg-bg);
overflow-x: clip; /* hidden sticky'yi kırıyor, clip kırmıyor */
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--mg-text);
transition: background-color .25s ease, color .25s ease;
}
body.modal-open {
padding-right: 0 !important;
overflow: hidden;
}
section#menu.menu {
overflow-x: clip;
}
#main {
top: 60px;
}
.mg-hero {
--mg-hero-pad-y: 10px;
position: relative;
margin: 0 0 0 0;
padding: var(--mg-hero-pad-y) 12px;
min-height: 116px;
background: var(--mg-primary);
color: #fff;
box-shadow: var(--mg-shadow);
}
.mg-hero--cover {
background-image: linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.60)), var(--mg-hero-cover);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mg-hero h1 {
font-family: "Alkatra-VariableFont_wght", sans-serif;
font-size: 20px;
margin: 0 0 1px;
color: #fff;
line-height: 1.2;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.mg-hero p, .mg-hero-meta {
margin: 0;
opacity: .88;
font-size: 12px;
color: #fff;
}
.mg-hero .mg-hero-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.mg-hero-brand {
display: flex;
align-items: center;
gap: 12px;
}
@media (max-width: 991px) {
.mg-hero h1 {
font-size: 17px;
}
.mg-hero-branch {
font-size: 14px;
}
.mg-hero-logo, .mg-hero-logo-fallback {
width: 48px;
height: 48px;
}
.mg-hero .mg-hero-actions {
gap: 3px;
}
}
.mg-hero-name-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.mg-hero-logo, .mg-hero-logo-fallback {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: cover;
object-position: center;
background: transparent;
box-shadow: 0 2px 10px rgba(0,0,0,.18);
flex-shrink: 0;
display: block;
align-self: center;
padding: 0;
}
.mg-hero-logo-fallback {
display: none; /* JS gösterince flex'e döner */
align-items: center;
justify-content: center;
color: #fff;
font-family: "Alkatra-VariableFont_wght", sans-serif;
font-size: 26px;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
backdrop-filter: blur(6px);
}
.mg-hero-text {
min-width: 0;
flex: 1;
}
.mg-hero-info {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
margin-top: 8px;
}
.mg-hero-pill, .mg-status-pill {
display: inline-flex !important;
align-items: center !important;
gap: 5px;
height: 24px;
padding: 0 9px;
background: rgba(255,255,255,.18);
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
line-height: 1 !important;
backdrop-filter: blur(6px);
transition: background .2s ease;
white-space: nowrap;
box-sizing: border-box;
border: 0;
}
.mg-status-pill {
border-radius: 8px !important;
}
.mg-kitchen-pill i {
font-size: 11px;
}
.mg-kitchen--calm {
background: rgba(45,156,90,.85) !important;
}
.mg-kitchen--normal {
background: rgba(199,154,23,.85) !important;
}
.mg-kitchen--busy {
background: rgba(192,85,63,.9) !important;
}
.mg-hero-pill *, .mg-status-pill * {
line-height: 1 !important;
}
button.mg-hero-pill, a.mg-hero-pill {
cursor: pointer;
}
@media (hover: hover) {
.mg-hero-pill:hover {
background: rgba(255,255,255,.3);
color: #fff;
}
}
a.mg-hero-pill,
a.mg-hero-pill:hover,
a.mg-hero-pill:focus,
a.mg-hero-pill:active,
a.mg-icon-btn,
a.mg-icon-btn:hover,
a.mg-icon-btn:focus,
a.mg-icon-btn:active {
color: #fff;
text-decoration: none;
}
.mg-hero-pill i, .mg-status-pill i {
font-size: 12px;
}
.mg-icon-btn {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.18);
color: #fff;
border: 0;
backdrop-filter: blur(6px);
transition: transform .15s ease, background .2s ease;
font-size: 12px;
}
@media (hover: hover) {
.mg-icon-btn:hover {
background: rgba(255,255,255,.3);
transform: scale(1.05);
}
}
.mg-icon-btn:active {
transform: scale(.95);
}
.mg-toolbar {
position: sticky;
top: 0;
z-index: 40;
background: var(--mg-bg);
padding: 10px 12px var(--mg-list-edge-gap);
margin: 0 -12px;
border-bottom: 1px solid transparent;
transition: box-shadow .2s ease, border-color .2s ease;
}
.mg-toolbar.is-stuck { /* yok — spacer zaten kayar */
}
.mg-search-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
min-width: 0;
}
.mg-search {
order: 1;
}
.mg-search-fill {
order: 1;
flex: 1 1 0%;
min-width: 0;
}
.mg-cur-wrap {
order: 2;
}
.mg-filter-actions-wrap {
order: 3;
}
.mg-viewbar-row {
order: 10;
flex: 0 0 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.mg-viewbar-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
margin-left: auto;
}
.mg-search {
position: relative;
display: flex;
align-items: center;
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: 8px;
height: 28px;
padding: 0 12px;
box-shadow: var(--mg-shadow);
flex: 1 1 0%;
min-width: 0;
}
.mg-search i.bi-search {
color: var(--mg-text-soft);
margin-right: 7px;
font-size: 13px;
flex-shrink: 0;
}
.mg-search input {
border: 0;
outline: 0;
background: transparent;
flex: 1 1 auto;
min-width: 0;
font-size: 12px;
color: var(--mg-text);
height: 100%;
line-height: 1;
}
.mg-search input::placeholder {
color: var(--mg-text-soft);
}
.mg-search .mg-clear {
border: 0;
background: transparent;
color: var(--mg-text-soft);
display: none;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: var(--mg-radius-sm);
font-size: 14px;
line-height: 1;
flex-shrink: 0;
cursor: pointer;
transition: color .15s, background .15s;
}
.mg-search.has-text .mg-clear {
display: inline-flex;
}
.mg-search .mg-clear:hover {
color: var(--mg-primary);
background: var(--mg-primary-soft);
}
.mg-x {
--mg-x-size: 28px;
--mg-x-font: 1.15rem;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--mg-x-size);
height: var(--mg-x-size);
padding: 0;
border: 0;
background: transparent;
color: var(--mg-text-muted);
border-radius: var(--mg-radius-sm);
line-height: 1;
cursor: pointer;
transition: color .15s, background .15s;
}
.mg-x > i { font-size: var(--mg-x-font); }
.mg-x:hover { color: var(--mg-primary); background: var(--mg-primary-soft); }
.mg-x--sm { --mg-x-size: 24px; --mg-x-font: 1rem; }
.mg-x--lg { --mg-x-size: 34px; --mg-x-font: 1.3rem; }
.modal-header .mg-x { position: absolute; top: 10px; right: 10px; }
.mg-filter-actions-wrap {
display: inline-flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.mg-filter-btn {
border: 1px solid var(--mg-border);
background: var(--mg-surface);
color: var(--mg-text-soft);
border-radius: 8px;
height: 28px;
padding: 0 14px;
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: var(--mg-shadow);
white-space: nowrap;
cursor: pointer;
transition: border-color .15s, color .15s;
}
@media (hover: hover) {
.mg-filter-btn:hover {
border-color: var(--mg-primary);
color: var(--mg-text);
}
}
.mg-filter-btn.has-filter {
border-color: var(--mg-primary);
color: var(--mg-primary);
}
.mg-filter-btn .label {
display: inline-block;
}
@media (max-width: 380px) {
.mg-filter-btn .label {
display: none;
}
.mg-filter-btn {
padding: 0 11px;
}
}
.mg-filter-count {
color: var(--mg-primary);
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mg-filter-clear {
display: none; /* aktif filtre yokken gizli */
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: -1px;
border-radius: 999px;
color: var(--mg-text-soft);
font-size: 11px;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.mg-filter-clear.is-visible {
display: inline-flex;
}
@media (hover: hover) {
.mg-filter-clear:hover {
background: color-mix(in srgb, var(--mg-primary) 14%, transparent);
color: var(--mg-primary);
}
}
.mg-cats {
display: flex;
flex-wrap: nowrap;
gap: 8px;
margin: 0;
padding: 0 2px 0;
order: -1;
flex: 0 0 100%;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.mg-cats::-webkit-scrollbar {
display: none;
}
.mg-cats.is-grid {
flex-wrap: wrap;
overflow: visible;
}
#mgCats button,
#mgCats button.mg-cat {
position: relative !important;
display: inline-flex !important;
align-items: flex-end !important;
justify-content: center !important;
width: 130px !important;
height: 80px !important;
flex-shrink: 0 !important;
overflow: hidden !important;
border-radius: 12px !important;
border: 1px solid transparent !important;
padding: 0 8px 8px 8px !important;
cursor: pointer !important;
transition: border-color .15s, box-shadow .15s;
scroll-snap-align: start;
box-shadow: var(--mg-shadow) !important;
outline: none !important;
background: #333 !important;
}
#mgCats button::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 65%);
z-index: 1;
pointer-events: none;
border-radius: 10px;
}
@media (hover: hover) {
#mgCats button:hover {
border-color: var(--mg-primary) !important;
}
}
#mgCats button.is-active {
border-color: var(--mg-primary) !important;
box-shadow: var(--mg-shadow) !important;
}
#mgCats button.is-hidden {
display: none !important;
}
#mgCats button[hidden] {
display: none !important;
}
.mg-cat-icon {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
font-size: 28px;
color: rgba(255,255,255,.85);
background: var(--mg-primary, #2D6A4F);
}
.mg-cat-icon img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mg-cat-ico-ov {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,.55);
z-index: 1;
pointer-events: none;
}
#mgCats button.mg-cat--noimg {
flex-direction: column !important;
align-items: center !important;
gap: 6px;
padding: 8px !important;
background: var(--mg-primary, #2D6A4F) !important;
}
#mgCats button.mg-cat--noimg::after {
display: none !important;
}
.mg-cat--noimg .mg-cat-icon {
position: static;
inset: auto;
width: auto;
height: auto;
background: transparent;
flex: 0 0 auto;
}
.mg-cat-label {
position: relative;
z-index: 2;
color: #fff !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.25;
text-shadow: 0 1px 4px rgba(0,0,0,.6);
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
white-space: normal;
}
.mg-sort-wrap {
position: relative;
}
.mg-sort-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 12px;
font-weight: 500;
height: 28px;
padding: 0 12px;
width: 130px; /* sabit — TR/EN en uzun metni karşılar */
box-sizing: border-box;
background: var(--mg-surface);
color: var(--mg-text-soft);
border: 1px solid var(--mg-border);
border-radius: 8px;
cursor: pointer;
transition: border-color .15s, color .15s;
white-space: nowrap;
overflow: hidden;
}
@media (hover: hover) {
.mg-sort-btn:hover {
border-color: var(--mg-primary);
color: var(--mg-text);
}
}
.mg-sort-btn i {
font-size: 11px;
transition: transform .2s;
}
.mg-sort-wrap.is-open .mg-sort-btn i {
transform: rotate(180deg);
}
.mg-sort-menu {
display: none;
position: absolute;
top: calc(100% + 4px);
right: 0;
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: 8px;
box-shadow: var(--mg-shadow-lg);
overflow: hidden;
z-index: 50;
width: 130px;
}
.mg-sort-wrap.is-open .mg-sort-menu {
display: block;
animation: mgFade .15s ease;
}
.mg-sort-opt {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 4px 12px;
text-align: left;
font-size: 12px;
font-weight: 500;
color: var(--mg-text);
background: transparent;
border: 0;
cursor: pointer;
transition: background .12s, color .12s;
}
.mg-sort-opt:hover {
background: var(--mg-primary);
color: #fff !important;
}
.mg-sort-opt.is-active {
color: var(--mg-primary);
font-weight: 600;
}
.mg-status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
line-height: 1;
background: rgba(255,255,255,.18);
color: #fff;
backdrop-filter: blur(6px);
}
.mg-viewbar-count {
font-size: 12px;
font-weight: 500;
color: var(--mg-text-soft);
white-space: nowrap;
flex-shrink: 0;
}
.mg-view-toggle {
display: inline-flex;
align-items: center;
height: 28px;
box-sizing: border-box;
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: 8px;
padding: 2px;
gap: 0;
}
.mg-view-btn {
border: 0;
background: transparent;
color: var(--mg-text-soft);
padding: 3px 7px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s ease, color .15s ease;
}
.mg-view-btn i {
font-size: 13px;
}
@media (hover: hover) {
.mg-view-btn:hover {
color: var(--mg-text);
}
}
.mg-view-btn.is-active {
background: var(--mg-primary);
color: #fff;
}
.mg-cur-wrap {
position: relative;
flex-shrink: 0;
}
.mg-cur-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 12px;
font-weight: 400;
height: 28px;
padding: 0 10px;
min-width: 36px;
box-sizing: border-box;
background: var(--mg-surface);
color: var(--mg-text-soft);
border: 1px solid var(--mg-border);
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
transition: border-color .15s, color .15s;
}
@media (hover: hover) {
.mg-cur-btn:hover {
border-color: var(--mg-primary);
color: var(--mg-text);
}
}
.mg-cur-btn i {
font-size: 10px;
transition: transform .2s;
}
.mg-cur-wrap.is-open .mg-cur-btn i {
transform: rotate(180deg);
}
.mg-cur-wrap.is-open .mg-cur-btn {
border-color: var(--mg-primary);
color: var(--mg-primary);
}
.mg-cur-menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: 8px;
box-shadow: var(--mg-shadow-lg);
overflow: hidden;
z-index: 50;
}
.mg-cur-wrap.is-open .mg-cur-menu {
display: block;
animation: mgFade .15s ease;
}
.mg-cur-opt {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
padding: 4px 4px;
font-size: 12px;
font-weight: 400;
color: var(--mg-text-soft);
background: transparent;
border: 0;
cursor: pointer;
white-space: nowrap;
direction: ltr; /* AED gibi RTL semboller satırı sağa yaslamasın */
transition: background .12s, color .12s;
}
.mg-cur-opt:hover {
background: var(--mg-primary);
color: #fff !important;
}
.mg-cur-opt:hover .mg-cur-opt-code {
color: #fff !important;
}
.mg-cur-opt.is-active {
color: var(--mg-primary);
font-weight: 700;
}
.mg-cur-opt-sym {
font-size: 14px;
unicode-bidi: isolate;
}
.mg-cur-opt-code {
font-weight: 600;
color: var(--mg-text);
}
.mg-cur-opt.is-active .mg-cur-opt-code {
color: var(--mg-primary);
}
.mg-lang-wrap {
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
}
#mgLangLabel {
font-size: 10px;
font-weight: 700;
letter-spacing: .02em;
}
.mg-lang-menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 50%;
margin-left: -18px;
width: 36px;
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: 8px;
box-shadow: var(--mg-shadow-lg);
overflow: hidden;
z-index: 50;
}
.mg-lang-wrap.is-open .mg-lang-menu {
display: block;
animation: mgFade .15s ease;
}
.mg-lang-opt {
display: block;
width: 100%;
padding: 4px 3px;
font-size: 10px;
font-weight: 700;
letter-spacing: .03em;
text-align: center;
color: var(--mg-text-soft);
text-decoration: none;
white-space: nowrap;
transition: background .12s, color .12s;
}
.mg-lang-opt:hover {
background: var(--mg-primary);
color: #fff;
}
.mg-lang-opt.is-active {
color: var(--mg-primary);
}
.mg-lang-opt.is-active:hover {
color: #fff;
}
@keyframes mgFade {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: none;
}
}
.mg-more-wrap {
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
}
.mg-more-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 132px;
padding: 3px;
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: 10px;
box-shadow: var(--mg-shadow-lg);
z-index: 50;
}
.mg-more-wrap.is-open .mg-more-menu {
display: block;
animation: mgFade .15s ease;
}
.mg-more-opt {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 4px 6px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--mg-text);
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
text-align: left;
text-decoration: none;
white-space: nowrap;
transition: background .12s, color .12s;
}
.mg-more-opt i {
font-size: 13px;
color: var(--mg-text-soft);
flex-shrink: 0;
}
@media (hover: hover) {
.mg-more-opt:hover {
background: var(--mg-primary);
color: #fff;
}
.mg-more-opt:hover i {
color: #fff;
}
}
@media (min-width: 992px) {
.mg-more-wrap {
display: none;
}
}
@media (max-width: 991px) {
.mg-act-pc {
display: none;
}
}
.mg-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 4px;
}
.mg-chip {
border: 1px solid var(--mg-border);
background: var(--mg-surface);
color: var(--mg-text-soft);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background .15s, border-color .15s, color .15s;
}
.mg-chip i {
font-size: 13px;
}
@media (hover: hover) {
.mg-chip:hover {
border-color: var(--mg-primary);
color: var(--mg-text);
background: var(--mg-surface);
}
}
.mg-chip.is-active {
background: var(--mg-surface);
color: var(--mg-text);
border-color: var(--mg-primary);
}
@media (hover: hover) {
.mg-chip.is-active:hover {
border-color: var(--mg-primary-2);
color: var(--mg-text);
background: var(--mg-surface);
}
}
.mg-chip-ic {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 7px;
margin: -4px -3px -4px -2px;
background: transparent;
color: inherit;
position: relative;
transition: background .15s, color .15s;
}
.mg-chip-ic i {
font-size: 14px;
}
.mg-chip[data-spice-level="2"] .mg-chip-ic i {
font-size: 10px;
}
.mg-chip[data-spice-level="3"] .mg-chip-ic i {
font-size: 8px;
}
.mg-chip.is-active .mg-chip-ic {
background: var(--mg-primary);
color: #fff;
}
.mg-chip.is-active .mg-chip-ic::after {
content: "\2713";
position: absolute;
top: -5px;
right: -5px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
color: var(--mg-primary);
font-size: 7px;
font-weight: 900;
line-height: 12px;
text-align: center;
box-shadow: 0 0 0 1.5px var(--mg-primary);
}
.mg-filter-label {
font-size: 12px;
font-weight: 700;
color: var(--mg-text-soft);
text-transform: uppercase;
letter-spacing: .3px;
margin-bottom: 6px;
border-top: 1px solid var(--mg-border);
padding-top: 7px;
margin-top: 4px;
}
.mg-range {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
min-width: 0;
overflow: hidden;
}
.mg-range span {
white-space: nowrap;
flex-shrink: 0;
}
.mg-range input[type=range] {
flex: 1 1 0;
min-width: 0;
accent-color: var(--mg-primary);
}
.mg-btn {
border: 1px solid var(--mg-border);
background: var(--mg-surface);
color: var(--mg-text-soft);
border-radius: 999px;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.mg-btn:hover {
border-color: var(--mg-primary);
color: var(--mg-text);
background: var(--mg-surface);
}
.mg-btn-primary {
background: var(--mg-primary);
color: #fff;
border-color: var(--mg-primary);
}
.mg-btn-primary:hover {
background: var(--mg-primary-2);
border-color: var(--mg-primary-2);
color: #fff;
}
.pcard-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 600;
line-height: 1;
padding: 3px 7px;
border-radius: 50px;
}
.pcard-badge i {
font-size: 11px;
}
.b-vegan {
background: rgba(52,211,153,.15);
color: #0a7c52;
}
.b-veg {
background: rgba(52,211,153,.12);
color: #1a8a5a;
}
.b-gf {
background: rgba(59,130,246,.12);
color: #1d5fad;
}
.b-spicy {
background: rgba(239,68,68,.12);
color: #b91c1c;
}
.b-new {
background: rgba(168,85,247,.12);
color: #7c3aed;
}
[data-theme="dark"] .b-vegan {
background: rgba(52,211,153,.18);
color: #52d99a;
}
[data-theme="dark"] .b-veg {
background: rgba(52,211,153,.15);
color: #4dd494;
}
[data-theme="dark"] .b-gf {
background: rgba(96,165,250,.15);
color: #60a5fa;
}
[data-theme="dark"] .b-spicy {
background: rgba(248,113,113,.15);
color: #f87171;
}
[data-theme="dark"] .b-new {
background: rgba(196,132,252,.15);
color: #c084fc;
}
.mg-product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 0;
}
@media (min-width: 576px) {
.mg-product-grid {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
}
.pcard {
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: var(--mg-radius);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--mg-shadow);
transition: transform .15s ease, box-shadow .2s ease;
cursor: pointer;
position: relative;
}
.pcard:active {
transform: scale(.98);
}
.pcard:hover {
box-shadow: var(--mg-shadow-lg);
}
.pcard.is-hidden {
display: none;
}
.pcard.pcard--textonly {
box-shadow: inset 0 0 0 .2px var(--mg-primary), var(--mg-shadow);
}
.pcard.pcard--textonly:hover {
box-shadow: inset 0 0 0 .2px var(--mg-primary), var(--mg-shadow-lg);
}
.pcard.is-pulse {
animation: pcard-pulse .32s cubic-bezier(.36,.07,.19,.97);
}
@keyframes pcard-pulse {
0% {
transform: scale(1);
}
30% {
transform: scale(.96);
}
70% {
transform: scale(1.03);
}
100% {
transform: scale(1);
}
}
.pcard-imgwrap {
width: 100%;
position: relative;
background: var(--mg-primary);
overflow: hidden;
aspect-ratio: 3 / 2;
}
.pcard-imgwrap::before {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 55%;
background: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
z-index: 2;
pointer-events: none;
}
@supports not (aspect-ratio: 3 / 2) {
.pcard-imgwrap::after {
content: "";
display: block;
padding-top: 66.667%; /* 3/2 oranı */
}
.pcard-img {
position: absolute;
inset: 0;
}
}
.pcard-status {
position: absolute;
top: 6px;
left: 6px;
z-index: 3;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 20px;
color: #fff;
}
.pcard-status-out     { background: rgba(220,38,38,.92); }
.pcard-status-limited { background: rgba(217,119,6,.92); }
.pcard-stdbadges {
position: absolute;
top: 6px;
right: 6px;
z-index: 4;
display: flex;
justify-content: flex-end;
gap: 1px;
flex-wrap: nowrap;
max-width: calc(100% - 12px);
}
.pcard-stdbadge {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--mg-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.pcard-stdbadge-more {
font-size: 8px;
font-weight: 700;
}
.pcard-tagbadges {
position: absolute;
left: 6px;
bottom: 6px;
z-index: 3;
display: flex;
flex-wrap: nowrap;
gap: 1px;
max-width: calc(100% - 12px);
}
.pcard-stdbadges .pcard-badge-extra,
.pcard-tagbadges .pcard-badge-extra { display: none; }
.mg-product-grid.view-list .pcard-stdbadges,
.mg-product-grid.view-list .pcard-status,
.mg-product-grid.view-list .pcard-tagbadges,
.mg-product-grid.view-list .pcard-spice { display: none; }
.pcard-tagbadge {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
background: #6c757d;
color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.pcard-tagbadge-more {
font-size: 8px;
font-weight: 700;
}
.pcard-spice {
position: absolute;
right: 6px;
bottom: 6px;
z-index: 3;
display: flex;
align-items: center;
height: 18px;
gap: 3px;
}
.pcard-spice i {
width: 18px;
height: 18px;
font-size: 9px;
}
.pcard-badges-inline { display: none; }
.mg-product-grid.view-list .pcard-badges-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.pcard-status-inline {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
color: #fff;
}
.pcard-spice-inline {
display: inline-flex;
align-items: center;
gap: 3px;
}
.pcard-spice-inline i {
width: 18px;
height: 18px;
font-size: 9px;
}
.pd-img-badges {
position: absolute;
top: 8px;
right: 26px;
z-index: 2;
display: flex;
align-items: center;
min-height: 28px;
flex-wrap: wrap;
justify-content: flex-end;
gap: 4px;
max-width: calc(100% - 52px);
}
.pd-img-status {
position: absolute;
top: 8px;
left: 26px;
z-index: 2;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 20px;
color: #fff;
}
.pd-img-status-out     { background: rgba(220,38,38,.92); }
.pd-img-status-limited { background: rgba(217,119,6,.92); }
.pd-img-badges-bottom {
position: absolute;
left: 26px;
bottom: 26px;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: calc(100% - 52px);
}
.pd-badge {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.pd-badge-std {
background: var(--mg-primary);
color: #fff;
}
.pd-badge-tag {
background: #6c757d;
color: #fff;
}
.pd-img-eco {
position: absolute;
top: 8px; left: 50%;
transform: translateX(-50%);
z-index: 2;
display: inline-flex; align-items: center; gap: 4px;
max-width: calc(100% - 120px);
padding: 3px 10px;
border-radius: 20px;
font-size: 11px; font-weight: 700; line-height: 1.4;
color: #fff;
background: linear-gradient(135deg, #2D9C5A 0%, #1E7E45 100%);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-img-eco-leaf { font-size: 12px; line-height: 1; }
.pd-img-spice {
position: absolute;
right: 26px;
bottom: 26px;
z-index: 2;
display: flex;
align-items: center;
gap: 4px;
}
.pd-img-spice i {
width: 22px;
height: 22px;
font-size: 11px;
}
.pcard-spice i,
.pcard-spice-inline i,
.pd-img-spice i {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: radial-gradient(circle at 50% 72%, #FFD21E 0%, #FF8A00 42%, #FF4D00 72%, #D81E05 100%);
color: #fff;
line-height: 1;
box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 5px rgba(255,90,0,.55);
}
.pcard-initials {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 700;
color: rgba(255,255,255,.85);
background: var(--mg-primary);
}
.mg-hero-branch {
font-weight: 400;
opacity: .85;
}
.mg-hero-lead {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.mg-hero-brand-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
min-width: 0;
}
.mg-hero-title-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.mg-hero-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 6px #4ade80;
flex-shrink: 0;
}
.mg-hero-closed-badge {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 8px;
border-radius: 6px;
background: rgba(248,113,113,.22);
color: #fca5a5;
font-size: 11px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
}
.mg-hero-substatus {
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,.9);
text-shadow: 0 1px 3px rgba(0,0,0,.45);
min-width: 0;
}
.mg-cat-icon.mg-cat-initial {
font-size: 28px;
font-weight: 700;
}
.footer-branch {
margin-top: -8px;
opacity: .8;
font-weight: 500;
}
.footer-branch a {
color: inherit;
text-decoration: none;
}
.footer-branch a:hover {
text-decoration: underline;
}
.footer-imgnote {
font-size: 11px;
line-height: 1.5;
opacity: .6;
margin: 6px 0 0;
}
.footer-website {
font-size: 13px;
opacity: .65;
}
.footer-website a {
color: inherit;
text-decoration: none;
}
.footer-website a:hover {
text-decoration: underline;
}
.pcard-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity .45s ease;
}
.pcard-img.is-loaded {
opacity: 1;
}
.pcard-img.is-broken {
display: none;
}
.pcard-img {
position: relative;
z-index: 1;
}
.pcard-body {
padding: 6px 12px; /* üst = alt: görsel↔ad boşluğu = fiyat↔kart altı boşluğu */
display: flex;
flex-direction: column;
gap: 3px;
text-align: center;
flex: 1; /* kart yüksekliğini tam doldur */
}
.pcard-title {
font-family: "Alkatra-VariableFont_wght", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--mg-text);
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: calc(1.3em * 1);
word-break: break-word;
}
.pcard-price {
font-size: 12px; /* ürün adı (pcard-title) ile aynı boyut */
font-weight: 700;
color: var(--mg-primary);
white-space: nowrap;
margin-top: auto; /* her zaman en altta */
}
.pcard-price-sym { font-size: 13px; font-weight: 400; margin-right: 1px; }
.pcard-price--disc {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.pcard-price-old {
color: var(--mg-text-soft);
text-decoration: line-through;
}
.pcard-price-new { color: var(--mg-primary); }
.pcard-price-new .pcard-price-sym { font-size: 13px; }
.pcard-price-ask {
font-style: italic;
font-weight: 500;
color: var(--mg-text-soft);
}
.pcard-price-ask::after {
content: "\200b";
font-size: 13px;
}
.pcard-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: auto;
min-height: 16px; /* alt sınır; fiyatsız kartta gerçek yüksekliği .pcard-price-spacer verir */
}
.pcard-price-spacer { visibility: hidden; }
.pcard-foot .pcard-price { margin-top: 0; }
@media (max-width: 575px) {
.pcard-body {
padding: 5px 10px;
gap: 1px;
}
.pcard-title {
line-height: 1.2;
height: calc(1.2em * 1);
}
}
.pcard-kcal { display: none; }
.mg-product-grid.view-list .pcard-foot { justify-content: space-between; }
.mg-product-grid.view-list .pcard-kcal { display: inline-flex; }
.pcard-kcal {
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 500;
color: var(--mg-text-soft);
background: var(--mg-surface-2);
border-radius: 999px;
padding: 2px 7px;
white-space: nowrap;
flex-shrink: 0;
}
.pcard-kcal i { font-size: 11px; opacity: .85; }
.pd-price-old {
font-size: 15px;
font-weight: 400;
color: var(--mg-text-soft, #999);
text-decoration: line-through;
align-self: center;
}
.pd-disc-badge {
align-self: center;
padding: 2px 9px;
border-radius: 20px;
background: #993556;
color: #fff;
font-size: 12px;
font-weight: 700;
}
.pd-disc-label {
align-self: center;
color: #993556;
font-size: 13px;
font-weight: 600;
}
.pd-nutrition {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 8px;
margin: 6px 0 2px;
}
@media (max-width: 991px) {
.pd-nutrition {
margin: 3px 0 1px;
}
}
.pd-nutri {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--mg-text-soft, #555);
background: var(--mg-surface-2, #f2f2f2);
border-radius: 999px;
padding: 4px 10px;
cursor: pointer;
}
.pd-nutri i { font-size: 12px; opacity: .85; }
[data-theme="dark"] .pd-nutri { color: rgba(255,255,255,0.7); }
.nutri-tip .tooltip-inner { text-transform: capitalize; }
.mg-product-grid.view-list {
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 768px) {
.mg-product-grid.view-list {
grid-template-columns: repeat(2, 1fr);
}
}
.mg-product-grid.view-list .pcard {
flex-direction: row;
}
.mg-product-grid.view-list .pcard-imgwrap {
width: 110px;
flex: 0 0 110px;
aspect-ratio: 3 / 2;
}
.mg-product-grid.view-list .pcard-body {
flex-direction: column;
justify-content: center;
align-items: stretch;
padding: 12px 16px;
flex: 1;
gap: 4px;
text-align: left;
}
.mg-product-grid.view-list .pcard-title {
min-height: 0;
height: auto;
-webkit-line-clamp: 1;
font-size: 12.5px;
text-align: left;
}
.mg-product-grid.view-list .pcard-price {
font-size: 12px;
margin-top: 0;
}
.mg-product-grid.view-list .pcard-skeleton {
flex-direction: row;
}
.mg-product-grid.view-list .skel-img {
width: 110px;
flex: 0 0 110px;
aspect-ratio: 3 / 2;
}
.mg-product-grid.view-list .skel-body {
align-items: flex-start;
}
.pcard-skeleton {
pointer-events: none;
border: 1px solid var(--mg-border);
background: var(--mg-surface);
border-radius: var(--mg-radius);
display: flex;
flex-direction: column;
overflow: hidden;
}
.skel-block {
background: linear-gradient(90deg, var(--mg-surface-2) 0%, var(--mg-border) 50%, var(--mg-surface-2) 100%);
background-size: 200% 100%;
animation: skelShine 1.2s ease-in-out infinite;
border-radius: 6px;
}
.skel-img {
width: 100%;
aspect-ratio: 3 / 2;
border-radius: 0;
}
.skel-body {
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.skel-line {
height: 11px;
}
.skel-line.w-70 {
width: 70%;
}
.skel-line.w-40 {
width: 40%;
}
@keyframes skelShine {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.pcard-title mark {
background: #fff176;
color: #111;
border-radius: 3px;
padding: 0 1px;
}
[data-theme="dark"] .pcard-title mark {
background: #a07c00;
color: #fff;
}
.mg-empty {
text-align: center;
padding: 40px 20px;
color: var(--mg-text-soft);
}
.mg-empty i {
font-size: 42px;
color: var(--mg-primary);
display: block;
margin-bottom: 8px;
}
.mg-empty h4 {
font-family: inherit;
font-size: 16px;
margin-bottom: 4px;
color: var(--mg-text);
}
.mg-empty small {
font-size: 12.5px;
}
section#contact.contact {
background: var(--mg-bg);
padding: 50px 0 0;
}
.contact .section-title h2 {
color: var(--mg-text);
font-size: 26px;
}
.contact .section-title h2 span {
color: var(--mg-primary);
}
.contact .section-title p {
color: var(--mg-text-soft);
font-size: 14px;
}
.mg-directions-note {
font-family: "Poppins-Light", sans-serif;
font-size: 14px;
color: var(--mg-text-soft);
}
.contact .map {
margin: 16px 0 10px;
border-radius: var(--mg-radius);
overflow: hidden;
}
.contact .map iframe {
display: block;
width: 100%;
height: 320px;
border: 0;
}
.contact .info-wrap {
background: var(--mg-surface) !important;
border: 1px solid var(--mg-border);
border-radius: var(--mg-radius);
box-shadow: var(--mg-shadow);
padding: 12px 40px !important;
}
.contact .info {
background: transparent !important;
padding: 8px 0;
}
.contact .info > i {
background: var(--mg-primary-soft) !important;
color: var(--mg-primary) !important;
border-radius: 12px !important;
}
.contact .info h4 {
color: var(--mg-text) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: none;
letter-spacing: 0;
margin-bottom: 4px !important;
font-family: inherit !important;
}
.contact .info p {
color: var(--mg-text) !important;
font-size: 13px !important;
line-height: 1.5;
font-family: inherit !important;
}
.contact .info:hover > i {
background: var(--mg-primary) !important;
color: #fff !important;
}
.contact .info p a, .contact .info a.link-ozel {
color: var(--mg-primary) !important;
}
.contact .info p a:hover {
color: var(--mg-primary-2) !important;
}
#footer {
background: var(--mg-surface) !important;
color: var(--mg-text-soft);
border-top: 1px solid var(--mg-border);
}
[data-theme="dark"] #footer {
background: var(--mg-surface-2) !important;
}
@keyframes mgSpin {
to {
transform: rotate(360deg);
}
}
.mg-lazy-hidden {
display: none !important;
}
.modal-content {
background: var(--mg-surface);
color: var(--mg-text);
border-radius: 10px;
border: 1px solid var(--mg-border);
overflow: hidden; /* görsel köşelere yapışsın */
padding: 0 !important;
}
#productModal .modal-header,
#productModal .modal-body,
#productModal .modal-footer {
padding: 0 !important;
border: 0;
}
.modal-title {
color: var(--mg-primary);
}
.modal-menu-ingredients {
color: var(--mg-text);
}
.modal-menu-explanation {
color: var(--mg-text-soft);
}
.modal-footer #notificationCancelButton {
background-color: var(--mg-primary) !important;
border: 1px solid var(--mg-primary-2);
}
@media (max-width: 576px) {
.bigger-on-small {
width: 60%;
}
.modal-menu-ingredients {
font-size: 16px;
}
.modal-menu-explanation {
font-size: 13px;
}
}
.wifi-modal-body {
padding: 8px 0 4px;
}
.wifi-field-label {
font-size: 11px;
font-weight: 700;
color: var(--mg-text-muted);
margin-bottom: 4px;
}
.wifi-field-row {
display: flex;
align-items: center;
gap: 8px;
background: var(--mg-surface-2);
border: 1px solid var(--mg-border);
border-radius: 10px;
padding: 8px 12px;
margin-bottom: 10px;
}
.wifi-field-value {
flex: 1;
font-size: 15px;
font-weight: 600;
color: var(--mg-text);
letter-spacing: .04em;
word-break: break-all;
}
.wifi-pass-value {
letter-spacing: .15em;
}
.wifi-btn {
border: 0;
background: transparent;
color: var(--mg-text-soft);
padding: 4px 6px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: color .15s, background .15s;
flex-shrink: 0;
}
@media (hover: hover) {
.wifi-btn:hover {
background: var(--mg-primary-soft);
color: var(--mg-primary);
}
}
.wifi-copy-btn {
background: var(--mg-primary);
color: #fff;
border: 0;
border-radius: 8px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
width: 100%;
cursor: pointer;
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background .15s, transform .1s;
}
.wifi-copy-btn:active {
transform: scale(.97);
}
.wifi-copy-btn.copied {
background: #2a7a55;
}
.wifi-qr-wrap {
display: flex;
justify-content: center;
margin: 12px 0 4px;
padding: 12px;
background: #fff;
border-radius: 12px;
border: 1px solid var(--mg-border);
}
.wifi-qr-wrap canvas, .wifi-qr-wrap img {
border-radius: 4px;
}
.wifi-qr-label {
text-align: center;
font-size: 11.5px;
color: var(--mg-text-muted);
margin-top: 6px;
}
#footer .credits a {
color: rgba(255,255,255,.7) !important;
}
#footer .credits a:hover {
color: #fff !important;
}
#footer .copyright,
#footer .credits {
color: rgba(255,255,255,.75) !important;
}
#footer {
background: var(--mg-primary-2) !important;
padding: 10px 0 !important;
margin-top: var(--mg-list-edge-gap);
}
#footer h3, #footer h4, #footer h5 {
color: var(--mg-primary) !important;
}
#footer .social-links a {
background: var(--mg-primary) !important;
}
#footer .social-links a:hover {
background: var(--mg-primary-soft) !important;
}
@media (max-width: 576px) {
#footer {
padding: 8px 0 !important;
}
#footer h3, #footer h4, #footer h5 {
margin-bottom: 4px !important;
font-size: 16px !important;
line-height: 1.4 !important;
}
#footer p,
#footer .footer-branch,
#footer .copyright,
#footer .credits {
margin-bottom: 4px !important;
line-height: 1.4 !important;
}
#footer .footer-branch {
margin-top: -2px !important;
}
#footer .social-links {
margin-bottom: 4px !important;
}
}
.back-to-top {
border-color: var(--mg-primary) !important;
}
.back-to-top i {
color: var(--mg-primary) !important;
}
.back-to-top:hover {
background: var(--mg-primary) !important;
}
.back-to-top:hover i {
color: #fff !important;
}
.mg-product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (min-width: 576px) {
.mg-product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.mg-product-grid {
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
}
@media (min-width: 992px) {
.mg-toolbar {
margin-bottom: 10px; /* scrollbar altına, kategori üstündeki boşlukla eşit */
}
.mg-cats {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--mg-primary-base) 35%, transparent) transparent;
cursor: grab;
padding-bottom: 10px;
}
.mg-cats::-webkit-scrollbar {
display: block;
height: 4px;
}
.mg-cats::-webkit-scrollbar-track {
background: transparent;
}
.mg-cats::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--mg-primary-base) 35%, transparent);
border-radius: 4px;
}
.mg-cats::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--mg-primary-base) 65%, transparent);
}
.mg-cats.is-dragging {
cursor: grabbing;
user-select: none;
}
}
[data-theme="dark"] .mg-cats {
scrollbar-color: color-mix(in srgb, var(--mg-primary) 30%, transparent) transparent;
}
[data-theme="dark"] .mg-cats::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--mg-primary) 30%, transparent);
}
[data-theme="dark"] .mg-cats::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--mg-primary) 55%, transparent);
}
body.mg-sheet-open {
overflow: hidden !important;
touch-action: none;
}
body.mg-sheet-open .mg-bs {
touch-action: pan-y;
}
.pd-close {
position: absolute;
top: 8px;
right: 12px;
z-index: 10;
width: 28px;
height: 28px;
background: transparent;
color: var(--mg-text-soft);
border: 0;
border-radius: var(--mg-radius-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .15s, color .15s;
padding: 0;
line-height: 1;
}
.pd-close:hover {
background: var(--mg-primary-soft);
color: var(--mg-primary);
}
.pd-close svg {
display: block;
flex-shrink: 0;
}
.mg-bs-overlay.is-open {
overscroll-behavior: none;
}
.mg-bs-overlay {
position: fixed;
inset: 0;
z-index: 1070;
background: rgba(0,0,0,0);
display: flex;
align-items: flex-end;
pointer-events: none;
transition: background .25s ease;
}
.mg-bs-overlay.is-open {
background: rgba(0,0,0,.55);
pointer-events: all;
}
.mg-bs {
width: 100%;
max-height: 68vh;
background: var(--mg-surface);
border-radius: 10px 10px 0 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
transform: translateY(100%);
transition: transform .35s cubic-bezier(.25,.8,.25,1);
will-change: transform;
}
#productSheet .mg-bs {
max-height: 62vh;
}
#infoSheet .mg-bs {
max-height: 62vh;
}
.mg-bs::-webkit-scrollbar {
width: 4px;
}
.mg-bs::-webkit-scrollbar-track {
background: var(--mg-surface);
}
.mg-bs::-webkit-scrollbar-thumb {
background: var(--mg-border);
border-radius: 4px;
}
.mg-bs {
scrollbar-color: var(--mg-border) var(--mg-surface);
}
.mg-bs-overlay.is-open .mg-bs {
transform: translateY(0);
}
.mg-bs-handle {
width: 26%;
height: 3px;
background: rgba(120,120,128,.40);
border-radius: 50px;
margin: 18px auto;
cursor: grab;
flex-shrink: 0;
box-sizing: content-box;
}
[data-theme="dark"] .mg-bs-handle {
background: rgba(255,255,255,.28);
}
@media (max-width: 991px) {
.mg-bs-handle {
margin: 9px auto;
}
}
.mg-bs-handlebar {
position: sticky;
top: 0;
z-index: 4;
height: 45px;
flex-shrink: 0;
background: var(--mg-surface);
}
.mg-bs-handlebar .mg-bs-handle {
position: absolute;
left: 50%;
top: 21px;
transform: translateX(-50%);
width: 26%;
margin: 0;
}
.mg-bs-handlebar .pd-close {
top: 9px;
}
.mg-bs-handlebar--titled .mg-bs-title {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
}
.mg-bs-safe {
height: max(20px, env(safe-area-inset-bottom));
}
.mg-bs-footer {
position: sticky;
bottom: 0;
display: flex;
gap: 10px;
padding: 12px 16px max(12px, env(safe-area-inset-bottom));
background: var(--mg-surface);
border-top: 1px solid var(--mg-border);
}
.mg-bs-footer .mg-btn {
flex: 1 1 0;
}
.mg-filter-sheet-body {
padding: 4px 16px 8px;
}
.mg-filter-sheet-body > .mg-filter-label:first-child {
border-top: none;
padding-top: 0;
margin-top: 0;
}
.mg-filter-sheet-body .mg-filter-label {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
}
.mg-bs-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px 4px;
}
.mg-bs-title {
font-size: 16px;
font-weight: 700;
color: var(--mg-text);
}
.mg-bs-close {
width: 28px;
height: 28px;
border-radius: var(--mg-radius-sm);
background: var(--mg-surface-2);
border: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--mg-text-soft);
font-size: 15px;
cursor: pointer;
transition: background .15s, color .15s;
flex-shrink: 0;
}
.mg-bs-close:hover {
background: var(--mg-primary-soft);
color: var(--mg-primary);
}
.mg-bs-row {
display: flex;
align-items: center;
gap: 12px;
padding: 7px 14px;
border-bottom: 1px solid var(--mg-border);
width: 100%;
background: transparent;
border-left: 0;
border-right: 0;
border-top: 0;
color: var(--mg-text);
text-align: left;
cursor: pointer;
text-decoration: none;
transition: background .15s;
}
a.mg-bs-row, a.mg-bs-row:visited {
color: var(--mg-text);
}
a.mg-bs-row:hover, button.mg-bs-row:hover {
background: var(--mg-surface-2);
color: var(--mg-text);
text-decoration: none;
}
.mg-bs-row-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--mg-primary-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mg-bs-row-icon i {
font-size: 14px;
color: var(--mg-primary);
line-height: 1;
}
.mg-bs-row-icon .bi {
font-size: 14px !important;
line-height: 1;
}
.mg-bs-row-content {
flex: 1;
min-width: 0;
}
.mg-bs-row-label {
font-size: 13px;
font-weight: 500;
color: var(--mg-text);
line-height: 1.3;
}
.mg-bs-row-sub {
font-size: 12px;
color: var(--mg-text-muted);
margin-top: 1px;
line-height: 1.45;
word-break: break-all;
}
.mg-bs-row-right {
flex-shrink: 0;
color: var(--mg-text-muted);
font-size: 13px;
}
.mg-bs-row-copy {
border: 0;
background: transparent;
color: var(--mg-text-muted);
padding: 4px 6px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: color .15s, background .15s;
flex-shrink: 0;
}
.mg-bs-row-copy:hover {
background: var(--mg-primary-soft);
color: var(--mg-primary);
}
.mg-fab-row {
position: fixed;
left: 0;
right: 0;
bottom: 16px;
z-index: 995;
display: flex;
align-items: stretch;
justify-content: center;
gap: 8px;
padding: 0 12px;
box-sizing: border-box;
transition: opacity .2s ease;
}
.mg-service-fab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--mg-primary);
color: #fff;
border: 0;
border-radius: 999px;
padding: 6px 12px;
flex: 1 1 0;
min-width: 0;
max-width: 168px;
box-sizing: border-box;
min-height: 34px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(0,0,0,.18);
cursor: pointer;
}
.mg-service-fab > i { font-size: 1rem; }
.mg-fab-short { display: none; }
@media (max-width: 430px) {
.mg-fab-full { display: none; }
.mg-fab-short { display: inline; }
}
@media (max-width: 360px) {
.mg-fab-row { gap: 6px; padding: 0 8px; }
.mg-fab-row .mg-service-fab,
.mg-fab-row .mg-cart-fab,
.mg-fab-row .mg-track-fab {
flex-direction: column;
gap: 3px;
min-height: 48px;
padding: 6px 4px;
border-radius: 16px;
font-size: 11px;
}
.mg-fab-row .mg-service-fab > i,
.mg-fab-row .mg-service-fab i,
.mg-fab-row .mg-cart-ico-wrap { font-size: 18px; }
}
.mg-service-fab i {
font-size: 16px;
line-height: 1;
}
body:has(.mg-bs-overlay.is-open) .mg-fab-row {
opacity: 0;
pointer-events: none;
}
.footer-fab-safe { display: none; }
body:has(.mg-fab-row) .footer-fab-safe {
display: block;
height: calc(62px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 360px) {
body:has(.mg-fab-row) .footer-fab-safe {
height: calc(76px + env(safe-area-inset-bottom, 0px));
}
}
.mg-add-btn.is-locked,
.mg-service-fab.is-locked,
.mg-track-fab.is-locked,
.mg-cart-send.is-locked,
.pd-add-btn.is-locked {
opacity: .45;
filter: grayscale(1);
box-shadow: none;
cursor: not-allowed;
}
.mg-add-btn.is-locked:hover,
.mg-service-fab.is-locked:hover,
.mg-track-fab.is-locked:hover,
.mg-cart-send.is-locked:hover,
.pd-add-btn.is-locked:hover,
.mg-add-btn.is-locked:active,
.mg-service-fab.is-locked:active,
.mg-track-fab.is-locked:active,
.mg-cart-send.is-locked:active,
.pd-add-btn.is-locked:active {
opacity: .45;
transform: none;
}
.mg-closed-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 12px;
padding: 10px 14px;
border-radius: var(--radius-sm, 10px);
background: var(--mg-surface-2);
border: 1px solid var(--mg-border);
color: var(--mg-text);
font-size: 13px;
line-height: 1.45;
}
.mg-closed-note > i {
font-size: 16px;
line-height: 1.3;
flex-shrink: 0;
color: var(--mg-text-soft);
}
.mg-closed-note strong { font-weight: 700; }
.mg-closed-note-sub {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--mg-text-soft);
}
.mg-cart-closed {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
padding: 8px 12px;
border-radius: var(--radius-sm, 8px);
background: var(--mg-surface-2, rgba(0,0,0,.04));
border: 1px solid var(--mg-border);
font-size: 12.5px;
line-height: 1.45;
color: var(--mg-text-soft);
}
.mg-cart-closed > i {
font-size: 15px;
flex-shrink: 0;
}
.mg-service-body {
min-height: 260px;
display: flex;
flex-direction: column;
}
.mg-service-view.is-hidden {
display: none;
}
.mg-service-head {
padding: 4px 16px 10px;
}
.mg-service-title {
font-size: 17px;
font-weight: 700;
color: var(--mg-text);
}
.mg-service-sub {
font-size: 13px;
color: var(--mg-text-soft);
margin-top: 2px;
}
.mg-service-confirm {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 20px 4px;
flex: 1;
}
.mg-service-confirm-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--mg-primary-soft);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.mg-service-confirm-icon i {
font-size: 26px;
color: var(--mg-primary);
line-height: 1;
}
.mg-service-confirm-title {
font-size: 17px;
font-weight: 700;
color: var(--mg-text);
}
.mg-service-confirm-sub {
font-size: 13px;
color: var(--mg-text-soft);
margin-top: 4px;
margin-bottom: 20px;
}
.mg-btn-block {
width: 100%;
border: 1px solid var(--mg-border);
background: var(--mg-surface);
color: var(--mg-text);
font-weight: 700;
font-size: 14px;
padding: 12px;
border-radius: 12px;
cursor: pointer;
}
.mg-btn-block:hover {
background: var(--mg-surface-2);
}
.mg-service-confirm-icon.is-error { background: rgba(220,53,69,.12); }
.mg-service-confirm-icon.is-error i { color: #dc3545; }
.mg-service-view.is-busy { opacity: .55; pointer-events: none; }
.mg-add-btn {
width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; margin-left: auto;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--mg-primary); border: 1.5px solid var(--mg-primary);
cursor: pointer; font-size: .82rem; line-height: 1;
transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.mg-add-btn:active { transform: scale(.9); }
.mg-add-btn.is-added { background: var(--mg-primary); border-color: var(--mg-primary); color: #fff; }  /* eklendi = tema rengi */
.mg-fav-btn {
width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; margin-left: auto;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--mg-text-soft); border: 1.5px solid var(--mg-border);
cursor: pointer; font-size: .82rem; line-height: 1;
transition: color .15s, border-color .15s, transform .1s;
}
.mg-fav-btn:active { transform: scale(.9); }
.mg-fav-btn.is-fav { color: #e0245e; border-color: #e0245e; }
.mg-fav-btn + .mg-add-btn { margin-left: 6px; }   /* kalp + ekle yan yana (sağda) */
.mg-cat-fav[hidden] { display: none !important; }
.mg-cart-fab {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: var(--mg-surface); color: var(--mg-text);
border: 1px solid var(--mg-primary); border-radius: 999px;
padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
flex: 1 1 0; min-width: 0; max-width: 168px;
box-sizing: border-box; min-height: 34px;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.mg-cart-fab[hidden] { display: none; }
[data-theme="dark"] .mg-cart-fab { background: var(--mg-surface-2); border-color: var(--mg-primary); }
.mg-cart-ico-wrap { position: relative; display: inline-flex; font-size: 1rem; line-height: 1; }
.mg-cart-badge {
position: absolute; top: -8px; right: -9px;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
background: var(--mg-primary); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; line-height: 1;
}
.mg-track-fab {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: var(--mg-surface); color: var(--mg-text);
border: 1px solid var(--mg-primary); border-radius: 999px;
padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
flex: 1 1 0; min-width: 0; max-width: 168px;
box-sizing: border-box; min-height: 34px;
white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.mg-track-fab[hidden] { display: none; }
[data-theme="dark"] .mg-track-fab { background: var(--mg-surface-2); border-color: var(--mg-primary); }
.mg-track-sheet { padding: 0 16px 4px; }
.mg-track-list { display: flex; flex-direction: column; gap: 12px; }
.mg-track-empty { text-align: center; color: var(--mg-text-soft); font-size: 14px; padding: 24px 0; }
.mg-trk-card { border: 1px solid var(--mg-border); border-radius: 12px; overflow: hidden; }
.mg-trk-head {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 11px 12px; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.mg-trk-chev { font-size: 12px; color: var(--mg-text-soft); flex: 0 0 auto; transition: transform .2s ease; }
.mg-trk-card.is-open .mg-trk-chev { transform: rotate(180deg); }
.mg-trk-summary { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--mg-text); }
.mg-trk-body { padding: 0 12px 12px; }
.mg-trk-card:not(.is-open) .mg-trk-body { display: none; }
.mg-trk-badge {
font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
background: var(--mg-surface-2); color: var(--mg-text-soft);
}
.mg-trk-badge.is-wait     { background: rgba(245,158,11,.16); color: #b45309; }
.mg-trk-badge.is-prep     { background: rgba(59,130,246,.16); color: #2563eb; }
.mg-trk-badge.is-ready    { background: rgba(45,106,79,.16);  color: #2D6A4F; }
.mg-trk-badge.is-served   { background: var(--mg-surface-2);   color: var(--mg-text-soft); }
.mg-trk-badge.is-closed   { background: var(--mg-surface-2);   color: var(--mg-text-soft); }
.mg-trk-badge.is-rejected { background: rgba(220,53,69,.14);   color: #dc3545; }
[data-theme="dark"] .mg-trk-badge.is-wait  { color: #fbbf24; }
[data-theme="dark"] .mg-trk-badge.is-prep  { color: #60a5fa; }
[data-theme="dark"] .mg-trk-badge.is-ready { color: #6ee7b7; }
.mg-trk-card.is-passive { opacity: .62; }
.mg-trk-card.is-passive.is-open { opacity: .82; }
.mg-trk-time { font-size: 12px; color: var(--mg-text-soft); }
.mg-trk-headwrap { display: flex; align-items: stretch; }
.mg-trk-headwrap .mg-trk-head { flex: 1; width: auto; min-width: 0; }
.mg-trk-close {
flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
padding: 0 12px; background: transparent; border: 0; cursor: pointer;
color: var(--mg-text-soft); font-size: 18px; line-height: 1;
}
.mg-trk-close:hover { color: var(--mg-text); }
.mg-trk-steps { display: flex; align-items: flex-start; margin: 2px 0 12px; }
.mg-trk-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.mg-trk-dot {
width: 12px; height: 12px; border-radius: 50%;
background: var(--mg-surface-2); border: 2px solid var(--mg-border);
}
.mg-trk-step.is-done .mg-trk-dot   { background: var(--mg-primary); border-color: var(--mg-primary); }
.mg-trk-step.is-active .mg-trk-dot { background: var(--mg-primary); border-color: var(--mg-primary); box-shadow: 0 0 0 4px rgba(45,106,79,.18); }
.mg-trk-slabel { font-size: 10.5px; color: var(--mg-text-soft); white-space: nowrap; }
.mg-trk-step.is-done .mg-trk-slabel, .mg-trk-step.is-active .mg-trk-slabel { color: var(--mg-text); font-weight: 600; }
.mg-trk-conn { flex: 1; height: 2px; background: var(--mg-border); margin: 5px 2px 0; border-radius: 2px; }
.mg-trk-conn.is-done { background: var(--mg-primary); }
.mg-trk-lines { display: flex; flex-direction: column; gap: 5px; }
.mg-trk-line { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--mg-text); }
.mg-trk-qty { color: var(--mg-primary); font-weight: 700; flex: 0 0 auto; }
.mg-trk-iname { flex: 1; min-width: 0; }
.mg-trk-iopt { font-size: 11px; color: var(--mg-text-soft); }
.mg-trk-iprice { flex: 0 0 auto; font-weight: 600; }
.mg-trk-drow { display: flex; justify-content: space-between; font-size: 12px; color: var(--mg-text-soft); margin-top: 8px; }
.mg-trk-drow > span:last-child { color: var(--mg-primary); font-weight: 600; }
.mg-trk-totalrow {
display: flex; justify-content: space-between; align-items: center;
margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mg-border);
font-weight: 700; color: var(--mg-text); font-size: 14px;
}
.mg-trk-total { color: var(--mg-primary); font-size: 16px; }
.mg-trk-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 35px; }
.mg-trk-hint { flex: 1; text-align: center; font-size: 12.5px; color: var(--mg-text-soft); }
.mg-trk-edit, .mg-trk-cancel {
flex: 1; padding: 8px 12px; cursor: pointer; border-radius: 10px; background: transparent;
font-size: 13px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.mg-trk-edit   { border: 1.5px solid var(--mg-primary); color: var(--mg-primary); }
.mg-trk-cancel { border: 1.5px solid #dc3545; color: #dc3545; }
.mg-trk-cancel:disabled { opacity: .6; cursor: default; }
.mg-cart-sheet { padding: 0 16px 4px; }
.mg-cart-sheet .is-hidden { display: none; }
.mg-cart-sub { font-size: 13px; color: var(--mg-text-soft); }
.mg-cart-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
.mg-cart-lines { display: flex; flex-direction: column; }
.mg-cart-line {
display: flex; align-items: center; gap: 10px;
padding: 10px 0; border-bottom: 1px solid var(--mg-border);
}
.mg-cart-line-main { flex: 1; min-width: 0; }
.mg-cart-line-name { font-size: 14px; font-weight: 700; color: var(--mg-text); }
.mg-cart-line-opt { font-size: 12px; color: var(--mg-text-soft); margin-top: 1px; }
.mg-cart-line-price { font-size: 13px; color: var(--mg-primary); font-weight: 700; margin-top: 2px; }
.mg-cart-line-unit { font-size: 11px; color: var(--mg-text-soft); font-weight: 500; }
.mg-cart-edit {
margin-left: 8px; padding: 0; border: 0; background: none; cursor: pointer;
font-size: 12px; font-weight: 600; color: var(--mg-primary);
display: inline-flex; align-items: center; gap: 3px; vertical-align: baseline;
}
.mg-cart-edit i { font-size: 11px; }
.mg-cart-edit:hover { text-decoration: underline; }
.mg-cart-qty { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mg-qty-btn {
width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--mg-border);
background: var(--mg-surface); color: var(--mg-text); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.mg-qty-btn:active { background: var(--mg-surface-2); }
.mg-qty-val { min-width: 20px; text-align: center; font-weight: 700; font-size: 14px; }
.mg-cart-empty { padding: 22px 0; text-align: center; color: var(--mg-text-soft); font-size: 14px; }
.mg-cart-namewrap { margin: 14px 0 4px; }
.mg-cart-namelbl { display: block; font-size: 12px; color: var(--mg-text-soft); margin-bottom: 5px; }
.mg-cart-namelbl > span { opacity: .7; }
.mg-cart-name,
.mg-cart-note {
width: 100%; box-sizing: border-box; padding: 10px 12px;
border: 1px solid var(--mg-border); border-radius: 10px;
background: var(--mg-surface); color: var(--mg-text); font-size: 14px;
font-family: inherit; line-height: 1.4;
transition: border-color .15s;
}
.mg-cart-note { resize: none; }
.mg-cart-name:hover,
.mg-cart-note:hover { border-color: var(--mg-primary); }
.mg-cart-name:focus,
.mg-cart-note:focus { outline: none; border-color: var(--mg-primary); }
.mg-cart-notewrap { margin: 8px 0 4px; }
.mg-cart-totals { margin: 14px 0 12px; }
.mg-cart-subrow, .mg-cart-drow {
display: flex; align-items: center; justify-content: space-between;
font-size: 13px; color: var(--mg-text-soft); margin-bottom: 6px;
}
.mg-cart-drow > span:last-child { color: var(--mg-primary); font-weight: 600; }
.mg-cart-disc:empty { display: none; }
.mg-cart-totalrow {
display: flex; align-items: center; justify-content: space-between;
padding-top: 8px; border-top: 1px solid var(--mg-border);
font-weight: 700; color: var(--mg-text); font-size: 15px;
}
.mg-cart-totals:not(:has(.mg-cart-drow)) .mg-cart-totalrow { border-top: 0; padding-top: 0; }
.mg-cart-sum { font-size: 18px; color: var(--mg-primary); }
.mg-cart-send {
width: 100%; padding: 8px 14px; cursor: pointer;      /* .pd-add-btn / .pr-notebox ile aynı yükseklik */
border: 1.5px solid var(--mg-primary); border-radius: 10px;
background: transparent; color: var(--mg-primary); font-size: 14px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mg-cart-send:disabled { opacity: .5; cursor: default; }
.mg-cart-foot { text-align: center; font-size: 12px; color: var(--mg-text-soft); margin-top: 8px; }
.mg-cart-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 8px 4px; }
.mg-cart-done .mg-cart-send { margin-bottom: 8px; }
.mg-cart-done .mg-btn-block { padding: 8px 14px; border-radius: 10px; }
.mg-cart-eco {
width: 100%;
text-align: center;
background: rgba(45,156,90,.08);
border: 1px solid rgba(45,156,90,.25);
border-radius: 12px;
padding: 12px;
margin-bottom: 16px;
}
.mg-cart-eco-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mg-cart-eco-ico {
flex: 0 0 auto;
width: 32px; height: 32px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #2D9C5A 0%, #1E7E45 100%);
color: #fff; font-size: 15px;
}
.mg-cart-eco-text { min-width: 0; }
.mg-cart-eco-title { font-size: 14px; font-weight: 700; color: #1E7E45; line-height: 1.3; }
.mg-cart-eco-sub { font-size: 12px; color: var(--mg-text-soft); line-height: 1.35; margin-top: 2px; }
.mg-cart-eco-pills {
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 12px;
}
.mg-cart-eco-pill {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
padding: 4px 12px; border-radius: 999px;
background: var(--mg-surface);
border: 1px solid rgba(45,156,90,.3);
color: #2D9C5A; font-size: 12px; font-weight: 600;
white-space: nowrap;
}
.mg-cart-eco-pill i { font-size: 12px; }
[data-theme="dark"] .mg-cart-eco { background: rgba(79,193,126,.10); border-color: rgba(79,193,126,.30); }
[data-theme="dark"] .mg-cart-eco-title { color: #4FC17E; }
[data-theme="dark"] .mg-cart-eco-pill { background: rgba(255,255,255,.06); border-color: rgba(79,193,126,.35); color: #4FC17E; }
.mg-bs-hours {
padding: 8px 16px 6px;
}
.mg-bs-hours-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
color: var(--mg-text-muted);
margin-bottom: 4px;
letter-spacing: .05em;
}
.mg-bs-hours-text {
font-size: 12px;
color: var(--mg-text);
line-height: 1.6;
}
.mg-bs-hours-closed {
font-size: 11px;
color: var(--mg-text-muted);
margin-top: 2px;
}
.mg-info-trigger {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding: 4px 8px;
background: rgba(255,255,255,.12);
border-radius: 10px;
border: 0;
cursor: pointer;
width: 100%;
text-align: left;
backdrop-filter: blur(6px);
transition: background .2s ease;
}
.mg-info-trigger:active {
background: rgba(255,255,255,.22);
}
.mg-info-trigger-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255,255,255,.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mg-info-trigger-icon i {
font-size: 13px;
color: #fff;
}
.mg-info-trigger-text {
flex: 1;
min-width: 0;
}
.mg-info-trigger-name {
font-size: 13px;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.mg-info-trigger-sub {
font-size: 12px;
color: rgba(255,255,255,.72);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.mg-info-trigger-arrow {
color: rgba(255,255,255,.55);
font-size: 11px;
flex-shrink: 0;
}
.mg-hero-pills-pc {
display: none;
}
@media (min-width: 992px) {
.mg-search-row {
flex-wrap: wrap;
}
.mg-search-row-break {
display: none;
}
.mg-search {
order: 1;
flex: 1;
min-width: 200px;
}
.mg-viewbar-row {
order: 10;
flex: 0 0 100%;
}
.mg-cur-wrap {
order: 3;
}
.mg-filter-actions-wrap {
order: 6;
}
.mg-hero-pills-pc {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 0;
flex: 1;
align-items: center;
justify-content: center;
align-self: center;
margin-bottom: 0;
padding: 0 12px;
box-sizing: border-box;
}
.mg-hero {
--mg-hero-pad-y: 28px;
min-height: 0;
}
.mg-info-trigger {
display: none;
}
.mg-hero-name-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 3px !important;
}
.mg-hero-brand > .mg-hero-lead {
flex: 0 0 auto !important;
min-width: unset !important;
}
#productSheet.is-open, #filterSheet.is-open, #legalSheet.is-open, #serviceSheet.is-open {
align-items: center;
justify-content: center;
padding: 20px;
}
#productSheet.is-open .mg-bs, #filterSheet.is-open .mg-bs, #legalSheet.is-open .mg-bs, #serviceSheet.is-open .mg-bs {
width: 520px !important;
max-width: calc(100% - 40px) !important;
height: auto !important;
max-height: 88vh !important;
border-radius: 20px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: thin;
scrollbar-color: var(--mg-border) transparent;
}
#productSheet.is-open .mg-bs::-webkit-scrollbar, #filterSheet.is-open .mg-bs::-webkit-scrollbar, #legalSheet.is-open .mg-bs::-webkit-scrollbar, #serviceSheet.is-open .mg-bs::-webkit-scrollbar {
width: 5px;
}
#productSheet.is-open .mg-bs::-webkit-scrollbar-track, #filterSheet.is-open .mg-bs::-webkit-scrollbar-track, #legalSheet.is-open .mg-bs::-webkit-scrollbar-track, #serviceSheet.is-open .mg-bs::-webkit-scrollbar-track {
background: transparent;
}
#productSheet.is-open .mg-bs::-webkit-scrollbar-thumb, #filterSheet.is-open .mg-bs::-webkit-scrollbar-thumb, #legalSheet.is-open .mg-bs::-webkit-scrollbar-thumb, #serviceSheet.is-open .mg-bs::-webkit-scrollbar-thumb {
background: var(--mg-border);
border-radius: 5px;
}
#infoSheet.is-open {
align-items: flex-start;
justify-content: center;
padding: 7vh 20px 20px;
}
#infoSheet.is-open .mg-bs {
max-width: 420px !important;
max-height: 88vh !important;
border-radius: 20px !important;
}
#cartSheet.is-open, #trackSheet.is-open, #a11ySheet.is-open {
align-items: center;
justify-content: center;
padding: 20px;
}
#cartSheet.is-open .mg-bs, #trackSheet.is-open .mg-bs, #a11ySheet.is-open .mg-bs {
width: 460px !important;
max-width: calc(100% - 40px) !important;
height: auto !important;
max-height: 88vh !important;
border-radius: 20px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: thin;
scrollbar-color: var(--mg-border) transparent;
}
#productSheet .mg-bs-handle, #infoSheet .mg-bs-handle, #filterSheet .mg-bs-handle, #legalSheet .mg-bs-handle, #serviceSheet .mg-bs-handle, #cartSheet .mg-bs-handle, #trackSheet .mg-bs-handle, #a11ySheet .mg-bs-handle {
display: none;
padding: 0;
}
#productSheet .pd-img-wrap {
padding-top: 18px;
}
#productSheet .pd-img-badges {
top: 26px;
}
#productSheet .pd-img-status {
top: 26px;
}
#productSheet .pd-img-eco {
top: 26px;
}
}
@media print {
.mg-toolbar, .mg-bs-overlay, .pcard-cta, .mg-hero-actions, .back-to-top {
display: none !important;
}
.mg-cats {
display: none !important;
}
}
.mg-pop { position: relative; display: inline-flex; }
.mg-pop-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 210px;
max-width: min(86vw, 320px);
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: 12px;
box-shadow: var(--mg-shadow-lg);
padding: 8px;
z-index: 1200;
display: none;
color: var(--mg-text);
}
.mg-pop.is-open > .mg-pop-panel { display: block; animation: mgFade .15s ease; }
.mg-pop-panel.mg-pop-right { left: auto; right: 0; }
.mg-pop-panel.mg-pop-center { left: 50%; right: auto; transform: translateX(-50%); }
.mg-pop-panel.mg-pop-up { top: auto; bottom: calc(100% + 6px); }
.mg-pop.is-open > .mg-pop-panel.mg-pop-center { animation: mgFadeCenter .15s ease; }
@keyframes mgFadeCenter {
from { opacity: 0; transform: translate(-50%, -4px); }
to   { opacity: 1; transform: translate(-50%, 0); }
}
.mg-pop-title {
font-size: 12px;
font-weight: 700;
color: var(--mg-text);
padding: 2px 8px 6px;
}
.mg-pop-panel p, .mg-pop-panel .mg-pop-about {
color: var(--mg-text-muted);
opacity: 1;
}
.mg-pop-about {
font-size: 12px;
line-height: 1.55;
padding: 0 8px 4px;
margin: 0;
text-align: justify;
max-width: 280px;
white-space: pre-wrap;
}
.mg-pop-list {
list-style: none;
margin: 0;
padding: 2px 8px 4px;
display: flex;
flex-direction: column;
gap: 7px;
max-width: 300px;
}
.mg-pop-list .mg-pop-li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12.5px;
line-height: 1.45;
color: var(--mg-text);
}
.mg-pop-list .mg-pop-li > i {
flex-shrink: 0;
font-size: 14px;
margin-top: 1px;
}
.mg-pop-list .mg-pop-li-ok > i   { color: #1f9d57; }
.mg-pop-list .mg-pop-li-warn > i { color: #d98a00; }
.mg-pet-ico { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
.mg-bs-row-icon .mg-pet-ico { width: 15px; height: 15px; color: var(--mg-primary); }
.mg-pop-about.mg-pet-sub { text-align: left; }
.mg-bs-acc-panel .mg-pop-list { padding: 0; max-width: none; }
.mg-pop-panel.mg-pop-wide { max-width: min(92vw, 520px); }
.mg-pop-wifi {
display: flex;
align-items: center;
gap: 10px;
padding: 0 8px 4px;
}
.mg-pop-wifi-text {
font-size: 13px;
color: var(--mg-text);
white-space: nowrap;
}
.mg-bs-wifi-line {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.mg-pop-email {
font-size: 13px;
color: var(--mg-text);
padding: 0 8px 8px;
word-break: break-all;
}
.mg-pop-addr { word-break: normal; }
.mg-pop-panel.mg-pop-addr-panel { max-width: min(86vw, calc(116px * 2 + 8px + 16px + 16px)); }
.mg-pop-actions {
display: flex;
gap: 8px;
padding: 0 8px 4px;
}
.mg-pop-act {
flex: 1;
border: 1px solid var(--mg-border);
cursor: pointer;
background: var(--mg-surface-2);
color: var(--mg-text-soft);
border-radius: 8px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
white-space: nowrap;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.mg-pop-act i { font-size: 13px; }
.mg-pop-act { min-width: 116px; }
.mg-pop-act-copy.is-copied { background: rgba(46,204,145,.15); color: #2ecc91; border-color: transparent; }
.mg-pop-act-send {
background: var(--mg-primary);
color: #fff;
border-color: var(--mg-primary);
}
.mg-pop-act-send:hover { color: #fff; filter: brightness(.95); }
@media (hover: hover) {
.mg-pop-act:not(.is-copied):not(.mg-pop-act-send):hover {
background: var(--mg-surface);
border-color: var(--mg-primary);
color: var(--mg-text);
}
}
.mg-bs-acc-panel .mg-pop-actions { gap: 6px; padding-bottom: 0; }
.mg-bs-acc-panel .mg-pop-act,
.mg-pop-act-sm {
flex: 0 0 auto;
font-size: 11px;
padding: 2px 8px;
border-radius: 6px;
gap: 3px;
min-width: 104px;
background: var(--mg-surface-2);
color: var(--mg-text-soft);
border: 1px solid transparent;
}
.mg-bs-acc-panel .mg-pop-act i,
.mg-pop-act-sm i { font-size: 12px; }
.mg-bs-acc-panel .mg-pop-act-send:hover { color: var(--mg-text-soft); filter: none; }
.mg-bs-acc-panel .mg-pop-act-copy.is-copied { background: rgba(46,204,145,.15); color: #2ecc91; }
.mg-pop-actions-wrap { flex-wrap: wrap; }
.mg-pop-act-social { min-width: 132px; }                       /* PC popover (12px yazı) */
.mg-bs-acc-panel .mg-pop-act-social { min-width: 118px; }      /* bottom sheet (11px kompakt) */
@media (hover: hover) {
.mg-bs-acc-panel .mg-pop-act:not(.is-copied):hover {
background: var(--mg-surface);
border-color: var(--mg-primary);
color: var(--mg-text);
filter: none;
}
}
.mg-sched-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 5px 8px;
border-radius: 8px;
font-size: 13px;
}
.mg-sched-row.is-today {
background: color-mix(in srgb, var(--mg-primary) 14%, transparent);
font-weight: 600;
padding-top: 3px;
padding-bottom: 3px;
}
.mg-sched-row.is-today + .mg-sched-note { margin-top: 2px; }
.mg-sched-day  { color: var(--mg-text); white-space: nowrap; }
.mg-sched-time { color: var(--mg-text-muted); white-space: nowrap; }
.mg-sched-row.is-closed .mg-sched-time { color: #ef4444; }
.mg-sched-note {
display: block;
font-size: 10px;
font-style: italic;
color: var(--mg-text-muted);
padding: 0 10px 6px;
line-height: 1.3;
}
.mg-sched-row + .mg-sched-note { margin-top: -4px; }
.mg-pop-caret { font-size: .7em; opacity: .6; margin-left: 4px; }
.mg-status-sub { opacity: .85; font-weight: 500; }
.mg-bs-acc { cursor: pointer; }
.mg-bs-acc-caret { display: inline-block; transform: rotate(-90deg); transition: transform .2s; }
.mg-bs-acc.is-open .mg-bs-acc-caret { transform: rotate(0deg); }
.mg-bs-acc-panel {
overflow: hidden;
max-height: 0;
padding: 0 14px 0 50px;
opacity: 0;
transition: max-height .32s ease, opacity .25s ease;
}
.mg-bs-acc-panel.is-open {
padding: 8px 14px 8px 50px;
opacity: 1;
border-bottom: 1px solid var(--mg-border);
}
.mg-bs-acc-panel .mg-sched-row { padding-top: 2.5px; padding-bottom: 2.5px; }
.mg-bs-acc-panel .mg-sched-row.is-today { padding-top: 1.5px; padding-bottom: 1.5px; }
.mg-bs-about {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--mg-text-soft);
text-align: justify;
}
.mg-contact-hours-trigger {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--mg-text);
font-size: 13px;
line-height: 1.5;
}
.contact .info .mg-pop {
padding-left: 12px;
}
.mg-seg {
display: flex; gap: 4px; padding: 3px;
margin-bottom: 12px; border-radius: 999px;
background: var(--mg-surface-2, rgba(0,0,0,.05));
}
.mg-seg-btn {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 7px 10px; border: 0; border-radius: 999px;
background: transparent; color: var(--mg-text-soft, #666);
font-size: 13px; font-weight: 600; cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.mg-seg-btn i { font-size: 14px; }
.mg-seg-btn.is-on { background: var(--mg-primary); color: #fff; }
.mg-bill-sheet { padding: 0; }
.mg-bill-modes {
display: flex; gap: 14px;
padding-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid var(--mg-border, rgba(0,0,0,.10));
}
.mg-bill-mode {
padding: 2px 0; border: 0; background: transparent;
color: var(--mg-text-muted, #999);
font-size: 12.5px; font-weight: 600; cursor: pointer;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.mg-bill-mode.is-on {
color: var(--mg-primary);
border-bottom-color: var(--mg-primary);
}
.mg-bill-list { display: flex; flex-direction: column; gap: 8px; }
.mg-bill-card {
border: 1px solid var(--mg-border, rgba(0,0,0,.10));
border-radius: var(--mg-radius, 12px); padding: 10px 11px;
background: var(--mg-surface, #fff);
}
.mg-bill-card.is-me { border-color: var(--mg-primary); }
.mg-bill-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mg-bill-name { font-size: 14.5px; font-weight: 700; color: var(--mg-text, #111); }
.mg-bill-you {
margin-left: 5px; font-size: 10.5px; font-weight: 700;
padding: 1px 7px; border-radius: 999px;
background: var(--mg-primary); color: #fff; vertical-align: middle;
}
.mg-bill-total { font-size: 15px; font-weight: 800; color: var(--mg-text, #111); white-space: nowrap; }
.mg-bill-lines { list-style: none; margin: 7px 0 0; padding: 0; }
.mg-bill-lines li {
display: flex; justify-content: space-between; gap: 10px;
padding: 3px 0; font-size: 12.5px; color: var(--mg-text-soft, #666);
}
.mg-bill-li-name { min-width: 0; }
.mg-bill-opt { opacity: .7; font-size: 12px; }
.mg-bill-li-val { white-space: nowrap; }
.mg-bill-card--equal { text-align: center; }
.mg-bill-card--equal .mg-bill-card-head { justify-content: center; gap: 14px; }
.mg-bill-equal-note { margin: 6px 0 0; font-size: 12.5px; color: var(--mg-text-soft, #666); }
.mg-bill-empty { padding: 18px 4px; text-align: center; font-size: 13px; color: var(--mg-text-soft, #666); }
.mg-bill-note { margin: 11px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--mg-text-muted, #888); }
.mg-bill-note i { margin-right: 4px; }
.mg-pay { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.mg-pay-sum { display: flex; justify-content: space-between; font-size: 13px; color: var(--mg-text-soft, #666); }
.mg-pay-sum--rem { font-weight: 700; color: var(--mg-text, #1a1a1a); }
.mg-pay-receipts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mg-pay-receipt-lnk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
padding: 6px 12px; border-radius: 999px; text-decoration: none;
color: var(--mg-primary, #2D6A4F); background: var(--mg-primary-soft, rgba(45,106,79,.08));
border: 1px solid var(--mg-border, rgba(0,0,0,.08)); }
.mg-pay-receipt-lnk:hover { background: var(--mg-primary, #2D6A4F); color: #fff; }
.mg-pay-pending { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 8px 10px; border-radius: 10px;
background: rgba(245,158,11,.12); color: #b45309; }
[data-theme="dark"] .mg-pay-pending { color: #fbbf24; }
.mg-pay-title { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--mg-text-muted, #888); text-transform: uppercase; }
.mg-pay-actions { display: flex; gap: 8px; }
.mg-pay-amt { display: flex; gap: 8px; }
.mg-pay-input, .mg-pay-qty {
border: 1px solid var(--mg-border, rgba(0,0,0,.16)); border-radius: 10px; padding: 9px 11px; font-size: 14px;
background: var(--mg-surface, #fff); color: var(--mg-text, #1a1a1a); width: 100%; -moz-appearance: textfield;
}
.mg-pay-input::-webkit-outer-spin-button, .mg-pay-input::-webkit-inner-spin-button,
.mg-pay-qty::-webkit-outer-spin-button, .mg-pay-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mg-pay-input:focus, .mg-pay-qty:focus { outline: none; border-color: var(--mg-primary); }
.mg-pay-btn {
flex: 1; border: 1.5px solid var(--mg-primary, #2D6A4F); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer;
background: transparent; color: var(--mg-primary, #2D6A4F); white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.mg-pay-btn:active { background: color-mix(in srgb, var(--mg-primary, #2D6A4F) 10%, transparent); }
.mg-pay-btn:focus { outline: none; }
.mg-pay-btn:focus-visible { outline: 2px solid var(--mg-primary, #2D6A4F); outline-offset: 2px; }
.mg-pay-pending-txt { flex: 1; min-width: 0; }
.mg-pay-cancel {
flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 2px 4px; line-height: 1;
color: inherit; opacity: .7; font-size: 15px; -webkit-tap-highlight-color: transparent;
}
.mg-pay-cancel:active { opacity: 1; }
.mg-bill-hint { font-size: 13px; color: var(--mg-text-muted, #888); margin: 2px 0 12px; }
.mg-bill-card .mg-bill-name  { font-weight: 600; font-size: 14.5px; }
.mg-bill-card .mg-bill-total { font-weight: 600; }
.mg-bill-card--pick, .mg-bill-card--all {
width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
-webkit-tap-highlight-color: transparent;
}
.mg-bill-card--pick.is-selected, .mg-bill-card--all.is-selected {
border-color: var(--mg-primary, #2D6A4F) !important;   /* yalnız çerçeve — glow/halo YOK (kullanıcı: "blur gibi, kaldır") */
}
.mg-bill-card--pick:active, .mg-bill-card--all:active { transform: translateY(1px); }
.mg-bill-card--all {
display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px;
}
.mg-bill-all-lbl { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.mg-bill-card-items { font-size: 12.5px; color: var(--mg-text-muted, #888); margin-top: 4px; }
.mg-bill-card--paid { opacity: .65; }
.mg-bill-paid-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--mg-text-muted, #888); }
.mg-bill-paid-amt { text-align: right; font-weight: 700; color: var(--mg-text-muted, #888); margin-top: 2px; }
.mg-bill-row { display: flex; align-items: center; gap: 12px; }
.mg-bill-row-ico { flex: 0 0 auto; font-size: 18px; color: var(--mg-text-muted, #888); }
.mg-bill-card--pick.is-selected .mg-bill-row-ico,
.mg-bill-card--all.is-selected .mg-bill-row-ico,
.mg-bill-tip-toggle.is-open .mg-bill-row-ico { color: var(--mg-primary, #2D6A4F); }
.mg-bill-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-bill-row-title { font-weight: 600; font-size: 14.5px; color: var(--mg-text, #1a1a1a); line-height: 1.25; }
.mg-bill-row-sub { font-size: 12px; color: var(--mg-text-muted, #888); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-bill-row-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--mg-text, #1a1a1a); }
.mg-bill-row-chev { color: var(--mg-text-muted, #888); font-size: 13px; font-weight: 400; }
.mg-bill-tip-val { font-weight: 600; font-size: 13.5px; color: var(--mg-primary, #2D6A4F); }
.mg-bill-tip-toggle.is-locked { cursor: default; opacity: .85; }
.mg-bill-tip-lock { color: var(--mg-text-muted, #888); font-size: 12.5px; }
.mg-bill-tipshares { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding: 8px 12px 2px; font-size: 12.5px; color: var(--mg-text-soft, #666); }
.mg-tipshares-lbl { font-weight: 600; color: var(--mg-text-muted, #888); }
.mg-tipshares-lbl i { color: var(--mg-primary, #2D6A4F); }
.mg-tipshare { display: inline-flex; align-items: center; gap: 4px; }
.mg-tipshare b { color: var(--mg-text, #1a1a1a); font-weight: 700; }
.mg-tipshare.is-me b { color: var(--mg-primary, #2D6A4F); }
.mg-tipshare .bi-lock-fill { font-size: 10.5px; color: var(--mg-text-muted, #888); }
.mg-pay-item.is-paid { opacity: .6; cursor: default; }
.mg-pay-item-paidbadge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--mg-primary, #2D6A4F); }
.mg-pay-item-partial { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--mg-text-muted, #888); }
.mg-trk-paysum { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px;
background: var(--mg-primary-soft, rgba(45,106,79,.08)); border: 1px solid var(--mg-border, rgba(0,0,0,.07)); }
.mg-trk-paysum-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--mg-text, #1a1a1a); font-weight: 600; }
.mg-trk-paysum-row.is-paid { color: var(--mg-primary, #2D6A4F); }
.mg-trk-paysum-row.is-paid i { margin-right: 3px; }
.mg-tip-clear-x {
display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px;
border-radius: 50%; color: var(--mg-text-muted, #888); font-size: 13px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mg-tip-clear-x:active { background: color-mix(in srgb, var(--mg-text-muted, #888) 16%, transparent); }
.mg-bill-fold {
border: 1px solid var(--mg-border, rgba(0,0,0,.10));
border-radius: var(--mg-radius, 12px); background: var(--mg-surface, #fff); overflow: hidden;
}
.mg-bill-fold.is-open, .mg-bill-fold.is-selected { border-color: var(--mg-primary, #2D6A4F); }
.mg-bill-fold-head {
width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
background: transparent; border: 0; padding: 10px 11px; -webkit-tap-highlight-color: transparent;
}
.mg-bill-fold-head:active { transform: translateY(1px); }
.mg-bill-fold.is-open .mg-bill-row-ico, .mg-bill-fold.is-selected .mg-bill-row-ico { color: var(--mg-primary, #2D6A4F); }
.mg-bill-fold-body { padding: 4px 11px 10px; }
.mg-bill-tip-fold #mgTipBlock { padding: 0 11px 10px; margin: 0; border: 0; }
.mg-bill-fold-body .mg-pay-item { cursor: pointer; border-bottom: 1px solid var(--mg-border, rgba(0,0,0,.07)); }
.mg-bill-fold-body .mg-pay-item:last-child { border-bottom: 0; }
.mg-pay-cb { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--mg-primary, #2D6A4F); }
.mg-pay-input {
width: 100%; box-sizing: border-box; padding: 10px 12px;
border: 1px solid var(--mg-border, rgba(0,0,0,.10)); border-radius: 10px;
background: var(--mg-surface, #fff); color: var(--mg-text, #1a1a1a);
font-size: 14px; font-family: inherit; line-height: 1.4; transition: border-color .15s;
}
.mg-pay-input:hover, .mg-pay-input:focus { outline: none; border-color: var(--mg-primary, #2D6A4F); }
.mg-pay-input::-webkit-outer-spin-button, .mg-pay-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mg-bill-tip-chev { transition: transform .15s ease; opacity: .6; }
.mg-bill-tip-toggle.is-open .mg-bill-tip-chev { transform: rotate(180deg); }
.mg-bill-tip-toggle.is-open { border-color: var(--mg-primary, #2D6A4F) !important; }
.mg-tip-chip-main { font-weight: 600 !important; }
.mg-bill-sheet .mg-tip-head { display: none; }
.mg-pay-online-btn, .mg-pay-cash-btn {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600; cursor: pointer;
border: 1.5px solid var(--mg-primary, #2D6A4F); -webkit-tap-highlight-color: transparent;
}
.mg-pay-online-btn { background: var(--mg-primary, #2D6A4F); color: #fff; margin-top: 6px; }
.mg-pay-cash-btn   { background: transparent; color: var(--mg-primary, #2D6A4F); margin-top: 12px; }
.mg-pay-online-btn[disabled], .mg-pay-cash-btn[disabled] { opacity: .45; cursor: default; }
.mg-pay-online-btn:active:not([disabled]) { filter: brightness(.96); }
.mg-pay-cash-btn:active:not([disabled])   { background: color-mix(in srgb, var(--mg-primary, #2D6A4F) 8%, transparent); }
.mg-pay-btn-lbl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mg-pay-btn-val { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.mg-bill-wait {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
padding: 22px 16px; border-radius: 14px;
border: 1px solid var(--mg-border, rgba(0,0,0,.14)); background: var(--mg-surface, #fff);
}
.mg-bill-wait + .mg-bill-wait { margin-top: 10px; }
.mg-bill-wait + .mg-bill-card,
.mg-bill-wait + .mg-bill-card--equal { margin-top: 12px; }
.mg-bill-card--static { cursor: default; }
.mg-bill-wait-ico { font-size: 26px; color: #b45309; }
[data-theme="dark"] .mg-bill-wait-ico { color: #fbbf24; }
.mg-bill-wait-title { font-size: 15px; font-weight: 600; color: var(--mg-text, #1a1a1a); }
.mg-bill-wait-amt { font-size: 22px; font-weight: 700; color: var(--mg-text, #1a1a1a); }
.mg-bill-wait-sub { margin: 2px 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--mg-text-muted, #888); }
.mg-bill-wait-cancel {
border: 1.5px solid var(--mg-border, rgba(0,0,0,.16)); border-radius: 10px;
background: transparent; color: var(--mg-text-soft, #666);
padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mg-bill-wait-cancel:active { background: rgba(0,0,0,.04); }
.mg-bill-wait-cancel i { margin-right: 5px; font-size: 12px; }
.mg-pay-gate {
display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 10px;
background: rgba(245,158,11,.12); color: #b45309; font-size: 12.5px; line-height: 1.45;
}
.mg-pay-gate i { margin-top: 2px; flex: 0 0 auto; }
.mg-pay-gate-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-pay-gate-sub { opacity: .85; font-size: 12px; }
[data-theme="dark"] .mg-pay-gate { color: #fbbf24; }
.mg-pay-online-note, .mg-pay-cash-note { color: var(--mg-text-muted, #888); font-size: 12px; margin: 6px 0 0; padding: 0 2px; }
.mg-pay-cash-note { margin-bottom: 2px; }
.mg-pay-amt .mg-pay-btn { flex: 0 0 auto; }
.mg-pay-btn--wide { width: 100%; margin-top: 8px; }
.mg-pay-more {
align-self: flex-start; border: 0; background: none; padding: 4px 0; cursor: pointer;
font-size: 13px; color: var(--mg-primary, #2D6A4F); font-weight: 600;
}
.mg-pay-more i { margin-right: 5px; }
.mg-pay-items { display: flex; flex-direction: column; gap: 4px; }
.mg-pay-item { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-size: 13.5px; }
.mg-pay-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-pay-item .mg-pay-qty { width: 58px; flex: 0 0 auto; padding: 6px 8px; text-align: center; }
.mg-pay-item-price { flex: 0 0 auto; font-size: 12.5px; color: var(--mg-text-soft, #666); min-width: 52px; text-align: right; }
.mg-bill-summary {
margin-top: 12px; padding-top: 10px;
border-top: 1px solid var(--mg-border, rgba(0,0,0,.10));
display: flex; flex-direction: column; gap: 8px;
}
.mg-bill-sumrow {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
font-size: 13px; color: var(--mg-text-soft, #666);
}
.mg-bill-sumlbl { min-width: 0; }
.mg-bill-tiprow { color: var(--mg-primary); font-weight: 600; }
.mg-bill-sumrow--total {
margin-top: 2px; padding-top: 9px;
border-top: 1px solid var(--mg-border, rgba(0,0,0,.10));
font-size: 16px; font-weight: 800; color: var(--mg-text, #111);
}
.mg-tip {
border: 1px solid var(--mg-border, rgba(0,0,0,.10));
border-radius: var(--mg-radius, 12px);
background: var(--mg-surface, #fff);
padding: 10px 11px;
}
.mg-tip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mg-tip-title {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13.5px; font-weight: 700; color: var(--mg-text, #111);
}
.mg-tip-title i { color: var(--mg-primary); }
.mg-tip-clear {
border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
font-size: 12.5px; font-weight: 600; color: var(--mg-primary);
}
.mg-tip-modes { display: flex; gap: 6px; margin-top: 9px; }
.mg-tip-mode {
flex: 1; padding: 6px 8px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--mg-border, rgba(0,0,0,.10)); background: transparent;
color: var(--mg-text-muted, #999); font-size: 12.5px; font-weight: 600;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mg-tip-mode.is-on { background: var(--mg-primary); border-color: var(--mg-primary); color: #fff; }
.mg-tip-body:empty { display: none; }
.mg-tip-chips { display: flex; gap: 7px; margin-top: 9px; }
.mg-tip-chip {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
white-space: nowrap; padding: 7px 4px; cursor: pointer;
border: 1px solid var(--mg-border, rgba(0,0,0,.10)); border-radius: 10px;
background: var(--mg-surface, #fff);
transition: border-color .15s ease, background .15s ease;
-webkit-tap-highlight-color: transparent;
}
.mg-tip-chip:focus { outline: none; }
.mg-tip-chip:focus-visible { outline: 2px solid var(--mg-primary); outline-offset: 2px; }
.mg-tip-chip.is-on { border-color: var(--mg-primary); background: var(--mg-primary-soft, rgba(45,106,79,.08)); }
.mg-tip-chip-main { font-size: 14px; font-weight: 800; color: var(--mg-text, #111); }
.mg-tip-chip-sub  { font-size: 11.5px; color: var(--mg-text-soft, #666); }
.mg-tip-custom { display: flex; gap: 7px; margin-top: 9px; }
.mg-tip-input {
flex: 1; min-width: 0; box-sizing: border-box; padding: 9px 11px;
border: 1px solid var(--mg-border, rgba(0,0,0,.10)); border-radius: 10px;
background: var(--mg-surface, #fff); color: var(--mg-text, #111); font-size: 14px;
}
.mg-tip-input:focus { outline: none; border-color: var(--mg-primary); }
.mg-tip-apply {
flex-shrink: 0; border: 0; cursor: pointer; padding: 0 16px; border-radius: 10px;
background: var(--mg-primary); color: #fff; font-size: 13.5px; font-weight: 700;
-webkit-tap-highlight-color: transparent;   /* mobilde basınca mavi tap-flash olmasın */
}
.mg-tip-apply:focus { outline: none; }
.mg-tip-apply:focus-visible { outline: 2px solid var(--mg-primary); outline-offset: 2px; }
.mg-tip-apply:active { filter: brightness(.95); }   /* transform YOK → zıplamaz */
.mg-wheel-sheet { padding: 0; }
.mg-wheel-empty { padding: 24px 6px; text-align: center; font-size: 13px; color: var(--mg-text-soft, #666); }
.mg-wheel-sub { text-align: center; font-size: 12.5px; color: var(--mg-text-muted, #999); margin-bottom: 12px; }
.mg-wheel-sub strong { color: var(--mg-text, #111); font-weight: 600; }
.mg-wheel-dot { margin: 0 5px; opacity: .6; }
.mg-wheel-stage {
--mg-wheel-size: 214px;
position: relative; width: var(--mg-wheel-size); height: var(--mg-wheel-size);
margin: 0 auto;
}
.mg-wheel-rotor {
width: var(--mg-wheel-size); height: var(--mg-wheel-size);
transform-origin: calc(var(--mg-wheel-size) / 2) calc(var(--mg-wheel-size) / 2);
transform: rotate(var(--mg-wheel-rot, 0deg));
transition: transform 4.2s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.mg-wheel-rotor.is-instant { transition: none; }
.mg-wheel-svg { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: var(--mg-shadow); }
.mg-wheel-slice { stroke: var(--mg-surface, #fff); stroke-width: 0.6; }
.mg-wheel-slice.is-winner { stroke: var(--mg-primary); stroke-width: 1.4; }
.mg-wheel-txt { font-size: 6px; font-weight: 700; }
.mg-wheel-pointer {
position: absolute; top: -3px; left: 50%; transform: translateX(-50%); z-index: 2;
width: 0; height: 0;
border-left: 11px solid transparent; border-right: 11px solid transparent;
border-top: 16px solid var(--mg-primary);
filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.mg-wheel-hub {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
background: var(--mg-surface, #fff); color: var(--mg-primary);
box-shadow: var(--mg-shadow), 0 0 0 3px var(--mg-surface, #fff);
font-size: 18px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mg-wheel-hub:active { transform: translate(-50%, -50%) scale(.94); }
.mg-wheel-hub.is-off { cursor: default; }
.mg-wheel-hub.is-off:active { transform: translate(-50%, -50%); }
.mg-wheel-result {
margin: 12px 0 10px; padding: 7px 14px; border-radius: var(--mg-radius, 10px);
background: var(--mg-surface-2, rgba(0,0,0,.05)); text-align: center;
transition: background .2s ease;
}
.mg-wheel-result.is-winner { background: var(--mg-primary-soft); }
.mg-wheel-result-title { font-size: 15px; font-weight: 700; color: var(--mg-text, #111); }
.mg-wheel-result.is-winner .mg-wheel-result-title { color: var(--mg-primary); }
.mg-wheel-result-sub { margin-top: 2px; font-size: 12.5px; color: var(--mg-text-soft, #666); }
.mg-wheel-result.is-winner .mg-wheel-result-sub { color: var(--mg-primary); font-weight: 600; }
.mg-wheel-spin {
width: 100%; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--mg-primary);
background: var(--mg-primary); color: #fff; font-size: 14px; font-weight: 600;
transition: opacity .15s ease;
}
.mg-wheel-spin:disabled { opacity: .5; cursor: default; }
.mg-wheel-spin.is-spinning { pointer-events: none; }
.mg-wheel-spin.is-spinning i { animation: mg-wheel-spin-ico 1s linear infinite; }
@keyframes mg-wheel-spin-ico { to { transform: rotate(360deg); } }
.mg-wheel-parts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 2px; }
.mg-wheel-parts-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--mg-text, #111); }
.mg-wheel-parts-count { font-size: 12px; color: var(--mg-text-muted, #999); white-space: nowrap; }
.mg-wheel-hint { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 9px; font-size: 11.5px; color: var(--mg-text-muted, #999); }
.mg-wheel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-wheel-chip {
display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
padding: 6px 8px 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
background: transparent; border: 1px solid var(--mg-border, rgba(0,0,0,.10)); color: var(--mg-text, #111);
}
.mg-wheel-chip.is-winner { border-color: var(--mg-primary, #2D6A4F); }
.mg-wheel-chip-name {
cursor: text; border-bottom: 1px dashed currentColor; line-height: 1.3;
max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none;
}
.mg-wheel-chip-name.is-editing {
border-bottom-style: solid; max-width: none; overflow: visible; text-overflow: clip;
}
.mg-wheel-chip-x {
display: inline-grid; place-items: center; width: 18px; height: 18px;
border: 0; background: transparent; color: inherit; cursor: pointer;
font-size: 12px; opacity: .7; transition: opacity .15s ease;
}
.mg-wheel-chip-x:hover { opacity: 1; }
.mg-wheel-add { display: flex; gap: 8px; margin-top: 12px; }
.mg-wheel-add-input {
flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 14px;
border: 1.5px solid var(--mg-primary); border-radius: 10px;
background: var(--mg-surface, #fff); color: var(--mg-text, #111); font-size: 14px; font-family: inherit;
}
.mg-wheel-add-input:focus { outline: none; border-color: var(--mg-primary); }
.mg-wheel-add-input:disabled { opacity: .5; }
.mg-wheel-add-btn {
flex-shrink: 0; width: 44px; cursor: pointer; border-radius: 10px; border: 1.5px solid var(--mg-primary);
background: var(--mg-primary); color: #fff; font-size: 16px; display: grid; place-items: center;
}
.mg-wheel-add-btn:disabled { opacity: .5; cursor: default; }
.mg-wheel-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--mg-text-muted, #999); }
.mg-wheel-note i { margin-right: 4px; }
.mg-wheel-fill-1 { fill: var(--mg-wheel-1); } .mg-wheel-fill-2 { fill: var(--mg-wheel-2); }
.mg-wheel-fill-3 { fill: var(--mg-wheel-3); } .mg-wheel-fill-4 { fill: var(--mg-wheel-4); }
.mg-wheel-fill-5 { fill: var(--mg-wheel-5); } .mg-wheel-fill-6 { fill: var(--mg-wheel-6); }
.mg-wheel-fill-7 { fill: var(--mg-wheel-7); } .mg-wheel-fill-8 { fill: var(--mg-wheel-8); }
.mg-wheel-c1 { background: var(--mg-wheel-1); } .mg-wheel-c2 { background: var(--mg-wheel-2); }
.mg-wheel-c3 { background: var(--mg-wheel-3); } .mg-wheel-c4 { background: var(--mg-wheel-4); }
.mg-wheel-c5 { background: var(--mg-wheel-5); } .mg-wheel-c6 { background: var(--mg-wheel-6); }
.mg-wheel-c7 { background: var(--mg-wheel-7); } .mg-wheel-c8 { background: var(--mg-wheel-8); }
.mg-wheel-txt.ink-d  { fill: #1c1c1c; }  .mg-wheel-txt.ink-l  { fill: #ffffff; }
.mg-wheel-chip.ink-d { color: #1c1c1c; } .mg-wheel-chip.ink-l { color: #ffffff; }
.mg-suggest {
margin: 12px 0; padding-top: 12px;
border-top: 1px solid var(--mg-border, rgba(0,0,0,.10));
}
.mg-suggest-head {
display: flex; align-items: center; gap: 6px; margin-bottom: 9px;
font-size: 12.5px; font-weight: 700; color: var(--mg-text-soft, #666);
}
.mg-suggest-head i { color: var(--mg-primary); font-size: 13px; }
.mg-suggest-list {
display: flex; gap: 8px; overflow-x: auto;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mg-suggest-list::-webkit-scrollbar { display: none; }
.mg-suggest-item {
flex: 0 0 auto; width: 84px; padding: 0;
display: flex; flex-direction: column; align-items: center; gap: 5px;
background: transparent; border: 0; cursor: pointer;
}
.mg-suggest-thumb {
width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--mg-surface-2, rgba(0,0,0,.05));
}
.mg-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mg-suggest-ph { color: var(--mg-text-muted, #999); font-size: 20px; }
.mg-suggest-name {
font-size: 11.5px; line-height: 1.3; color: var(--mg-text, #111);
text-align: center; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.mg-suggest-item:active .mg-suggest-thumb { transform: scale(.96); }