@import url('../textfont/stylesheet.css');
@import url('line-awesome.css');
@import url('all.min.css');
@import url('swiper-bundle.min.css');
@import url('animate.css');
@import url('bootstrap.min.css');
@import url('fancybox.css');
@import url('lity.min.css');
@import url('intlTelInput.css');
@import url('aos.css');
@import url('coloris.min.css');


a {
	text-decoration:none;
	transition:all 0.3s ease;
}
a:hover {
	text-decoration:none;
}
h1 {
	font-size:22px;
	font-weight:700;
	line-height:24px;
	margin:0px;
	padding:0px;
}
h2 {
	font-size:20px;
	font-weight:700;
	line-height:22px;
	margin:0px;
	padding:0px;
}
h3 {
	font-size:18px;
	font-weight:600;
	line-height:20px;
	margin:0px;
	padding:0px;
}
h4,h5 {
	font-size:16px;
	font-weight:500;
	line-height:20px;
	margin:0px;
	padding:0px;
}
p {
	font-size:15px;
	font-weight:400;
	line-height:22px;
	margin:0px;
	padding:0px;
}
ol,ul {
	padding:0px;
	margin:0px;
}
main {
	overflow:hidden;
	width:calc(100vw - 5px);
	min-height:100vh;
}

body {
	position:relative;
	font-family: "Outfit", sans-serif;
}


:root {
  --anarenk: #ec3051;
  --kirmizi: #ea0005;
  --gri: #9D9E9D;
  --siyah: #000;
  --krem: #fcfcf9;
  --gradient: linear-gradient(150deg,rgba(236,48,81,1),rgba(234 216 46));
  --gradient2: linear-gradient(120deg,rgba(236,48,81,1),#9a0917);
  --primary: #3a8df5;
  --success: #28c76f;
  --info: #00cfe8;
  --warning: #ff9f43;
  --danger: #ea5455;
}

/* width */
.scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

/* Track */
.scrollbar::-webkit-scrollbar-track {
  background: #F6F5F0; 
}
 
/* Handle */
.scrollbar::-webkit-scrollbar-thumb {
  background: var(--gradient2); 
}

/* Handle on hover */
.scrollbar::-webkit-scrollbar-thumb:hover {
  background: #FEDD06; 
}
.container-fluid {
	max-width:calc(100vw - 30px);	
}

.swiper {
	position:relative;
	overflow:hidden;
}

.dikeyortala {
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:100%;
}
.dropdown-toggle::after {
	display: none !important;
}
.dropstart .dropdown-toggle::after {
	display: none !important;
}
.dropstart .dropdown-toggle::before {
	display: none !important;
}
.dropdown-menu {
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/*------------------cerezpolitikasi----------------------*/
.cerezpolitikasi {
	position:fixed;
	bottom:20px;
	left:20px;
	width:400px;
	max-width:calc(100% - 40px);
	padding:20px;
	border-radius:20px;
	background:rgba(0,0,0,0.5);
	font-size:14px;
	line-height:20px;
	color:#fff;
	z-index:100000;
}
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	grid-gap:8px;
	padding:0px 20px;
	height:50px;
	border-radius:0px;
	font-weight: 500;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	border:0px;
}
.btn i {
	font-size: 24px;
}
.btn-sm {
	padding: 0px 14px;
	height: 36px;
	font-size: 12px;
	line-height: 24px;
}
.btn-sm i {
	font-size: 18px;
}
.btn.btn-kare {
	padding:0px 0px;
	height:50px;
	width:50px;
}
.btn.btn-sm.btn-kare {
	padding:0px 0px;
	height:36px;
	width:36px;
}
.btn-gradient {
	background:var(--gradient2);
	color:#fff;
}


/*------------------text----------------------*/
/*------------------btn renkleri ve animasyon----------------------*/

/* ORTAK ANİMASYON AYARI */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger ,
.btn-secondary 
{
	background-size: 200% 200%;
	background-position: 0% 50%;
	transition: background-position 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease;
	color: #fff !important;
	border: none !important;
}

/* HOVER */
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover ,
.btn-secondary:hover 
{
	background-position: 100% 50%;
	transform: scale(1.04);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* PRIMARY */
.btn-primary {
	background: linear-gradient(120deg, #3a8df5, #1e60d4, #3a8df5) !important;
}
.bg-primary { background-color: #3a8df5 !important; }
.text-primary { color: #3a8df5 !important; }
.border-primary { border-color: #3a8df5 !important; }

/* SUCCESS */
.btn-success {
	background: linear-gradient(120deg, #28c76f, #009e60, #28c76f) !important;
}
.bg-success { background-color: #28c76f !important; }
.text-success { color: #28c76f !important; }
.border-success { border-color: #28c76f !important; }

/* INFO */
.btn-info {
	background: linear-gradient(120deg, #00cfe8, #007bff, #00cfe8) !important;
}
.bg-info { background-color: #00cfe8 !important; }
.text-info { color: #00cfe8 !important; }
.border-info { border-color: #00cfe8 !important; }

/* WARNING */
.btn-warning {
	background: linear-gradient(120deg, #ff9f43, #ff6f00, #ff9f43) !important;
}
.bg-warning { background-color: #ff9f43 !important; }
.text-warning { color: #ff9f43 !important; }
.border-warning { border-color: #ff9f43 !important; }

/* DANGER */
.btn-danger {
	background: linear-gradient(120deg, #ea5455, #d63031, #ea5455) !important;
}
.bg-danger { background-color: #ea5455 !important; }
.text-danger { color: #ea5455 !important; }
.border-danger { border-color: #ea5455 !important; }

/*------------------text----------------------*/

.text-ana {
	color:var(--anarenk);
}

/*------------------card----------------------*/

.card {
	border-radius:0px;
	border:0px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.card .card-body {
    padding: 2rem 2rem;
}
.modal-content {
    border: 0px solid rgba(0, 0, 0, .2);
    border-radius: 0px;
}
/*------------------header----------------------*/

.aciklama {
	margin-bottom:24px;
}
.aciklama h1 {
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	color: var(--yesil);
	margin-bottom:14px;
}
.aciklama ul,ol {
	list-style:none;
	margin-bottom:24px;
}
.aciklama ul li ,
.aciklama ol li 
{
	position:relative;
	padding-left:15px;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--yesil);
	opacity: 1;
}
.aciklama ul li:before ,
.aciklama ol li:before 
{
	position:absolute;
	content:"";
	top:11px;
	left:0px;
	width:7px;
	height:7px;
	border-radius:4px;
	background:var(--yesil);
	opacity: 1 !important;
}
.aciklama img {
	width:100% !important;
	border-radius:20px;
	max-height:300px;
	object-fit:cover;
	margin-bottom:25px;
}
.aciklama h2 ,
.aciklama h3 ,
.aciklama h4 ,
.aciklama h5 
{
	font-weight: 700;
	font-size: 24px;
	line-height: 36px;
	color: var(--yesil);
	margin-bottom:20px;
}
.aciklama p 
{
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: var(--yesil);
	opacity: 1;
	margin-bottom:20px;
}

/*------------------form-control----------------------*/


.form-control {
	border:1px solid rgba(0,0,0,0.1);
	border-radius:0px;
	height:50px;
}
textarea.form-control {
	border:1px solid rgba(0,0,0,0.1);
	border-radius:0px;
	height:150px;
}
.form-check-input:checked {
    background-color: var(--anarenk);
    border-color: var(--anarenk);
}
.form-control[type=file] {
    line-height: 37px;
}

.file-upload-box {
	display:block;
	border: 2px dashed #ccc;
	padding: 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.3s ease;
	background-color: #f9f9f9;
}
.file-upload-box:hover {
	border-color: #007bff;
}
.file-upload-box input[type="file"] {
	display: none;
}
.file-upload-box .icon {
	font-size: 48px;
	line-height:40px;
	color: #007bff;
	margin-bottom: 0px;
}

/*------------------inputalan----------------------*/

.inputalan {
	position:relative;
}
.inputalan .form-control {
	border:1px solid rgba(0,0,0,0.1);
	border-radius:0px;
	height:50px;
}
.inputalan .form-control:focus {
	border:1px solid var(--anarenk);
}
.inputalan.icon .form-control {
	padding-left:40px;
}
.inputalan.buton .form-control {
	padding-right:40px;
}
.inputalan .icon {
	position:absolute;
	top:5px;
	left:5px;
	width:30px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	color:rgba(0,0,0,0.5);
}
.inputalan .buton {
	position:absolute;
	top:0px;
	right:0px;
	width:40px;
	height:50px;
	background:transparent;
	border:0px solid rgba(0,0,0,0.1);
	border-left:1px solid rgba(0,0,0,0.1);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	color:rgba(0,0,0,0.5);
}
.inputalan .buton:hover {
	color:var(--anarenk);
}

/*------------------girispage----------------------*/

#girispage {
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height:100dvh;
	background:var(--gradient);
}
#girispage .logo {
	display:block;
	text-align:center;
}
#girispage .logo img {
	max-height:50px;
	max-width:100%;
}
/*------------------site----------------------*/

#site {
	position:relative;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
}
#site #siteust {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	height:80px;
	border-bottom:1px solid rgba(0,0,0,0.2);
}
#site #siteust .siteustsol {
	width:20%;
	padding:15px;
	border-right:1px solid rgba(0,0,0,0.2);
	transition:all 0.3s ease;
}
#site #siteust .siteustsag {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	grid-gap:20px;
	width:80%;
	padding:15px;
	transition:all 0.3s ease;
}
#site.dar #siteust .siteustsol {
	width:80px;
}
#site.dar #siteust .siteustsag {
	width:calc(100% - 80px);
}
#site #siteust .logo {
	padding:15px 0px;
}
#site #siteust .logo img:first-child {
	max-height:50px;
	max-width:100%;
	display:block;
}
#site #siteust .logo img:last-child {
	max-height:50px;
	max-width:50px;
	display:none;
}
#site.dar #siteust .logo img:first-child {
	display:none;
}
#site.dar #siteust .logo img:last-child {
	display:block;
}
#site #siteust .profil {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	background:var(--gradient);
}
#site #siteust .profil img {
	width:50px;
	height:50px;
	background:var(--anarenk);
}
#site #siteust .profil span {
	width:calc(100% - 50px);
	padding-left:15px;
	padding-right:15px;
	font-size:16px;
	font-weight:600;
	line-height:24px;
	color:#fff;
}
#site #siteorta {
	display:flex;
	flex-wrap:wrap;
	height:calc(100dvh - 80px);
	background:rgba(0,0,0,0);
}
#site #siteorta .siteortasol {
	width:20%;
	height:100%;
	padding:15px;
	border-right:1px solid rgba(0,0,0,0.2);
	overflow-y:scroll;
	transition:all 0.3s ease;
}
#site #siteorta .siteortasag {
	display:flex;
	grid-gap:20px;
	width:80%;
	height:100%;
	padding:15px;
	overflow-y:scroll;
	transition:all 0.3s ease;
	background:#f1f1f1;
}

#site.dar #siteorta .siteortasol {
	width:0px;
	height:0px;
	overflow:hidden;
	padding:0px;
}
#site.dar #siteorta .siteortasag {
	width:calc(100% - 0px);
}
#solmenu {
	display:flex;
	flex-direction:column;
	grid-gap:10px;
}

/*------------------solmenu----------------------*/

#solmenu .menu-item {
	position: relative;
}

#solmenu .menu-link {
	position: relative;
	display: flex;
	align-items: center;
	padding: 12px 20px;
	color: #000;
	text-decoration: none;
	transition: background 0.4s ease, color 0.3s ease, transform 0.2s ease;
	position: relative;
	overflow: hidden;
	z-index:10;	
}
#solmenu .menu-link.paketson {
	background:rgba(245,245,245,1);
	padding: 6px 10px 6px 10px;
}
#solmenu .menu-link i {
	font-size:26px;
}

#solmenu .menu-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
	z-index: -1;
}

#solmenu .menu-link:hover::before ,
#solmenu .menu-item.active .menu-link::before 
{
	transform: scaleX(1);
}

#solmenu .menu-link.paketson:hover::before 
{
	transform: scaleX(0);
}

#solmenu .menu-link span, .menu-link i {
	transition: transform 0.2s ease;
}


#solmenu .menu-link:hover,
#solmenu .menu-item.active .menu-link
{
	color: #fff; /* yazı rengi değişimi */
}

#solmenu .menu-link.paketson:hover
{
	color: #000; /* yazı rengi değişimi */
}

#solmenu .menu-link span {
	margin-right: 10px;
	font-size: 18px;
	display: flex;
	align-items: center;
}
#solmenu .menu-link.paketson span {
	display:flex;
	align-items:center;
	justify-content:center;
	width:50px;
	height:50px;
	background: var(--gradient);
	color:#fff;
}

#solmenu .menu-item.hover .menu-link::after {
	position:absolute;
	content:"\f105";
	top:0px;
	right:0px;
	width:40px;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:16px;
	color:#000;
	font-family: 'Line Awesome Free';
    font-weight: 900;
	transition:all 0.3s ease;
}
#solmenu .menu-item.hover.active .menu-link::after {
	transform:rotate(90deg);
}
#solmenu .menu-link.paketson div {
	display:flex;
	flex-direction:column;
}


#solmenu .acilan {
	display: none;
	flex-direction: column;
	padding-left: 40px;
	background-color: var(--anarenk);
	transition:all 0.3s ease;
}

#solmenu .menu-item.active .acilan {
	display: flex;
}

#solmenu .menu-alt-link {
	padding: 10px 0;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s;
}

#solmenu .menu-alt-link:hover {
	color: #fff;
}

/*------------------widget-box----------------------*/
.widget-box {
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease-in-out;
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 15px;
}
.widget-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.widget-box .icon {
	font-size: 32px;
	color: #fff;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}
.widget-box:hover .icon {
	transform: rotate(10deg) scale(1.1);
}
.widget-box .text {
	flex-grow: 1;
}
.widget-box .text h4 {
	font-size: 16px;
	margin: 0;
	color: #555;
}
.widget-box .text .number {
	font-size: 22px;
	font-weight: bold;
	color: #000;
}


/*------------------activity-box----------------------*/
.activity-box {
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	padding: 20px;
}

.activity-box h5 {
	font-weight: bold;
	margin-bottom: 20px;
	color: #333;
}

.activity-item {
	display: flex;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
	transition: background 0.2s ease;
}
.activity-item:last-child {
	border-bottom: none;
}

.activity-icon {
	font-size: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin-right: 15px;
	flex-shrink: 0;
}

.activity-content {
	flex-grow: 1;
}
.activity-content .title {
	font-size: 15px;
	color: #222;
}
.activity-content .time {
	font-size: 13px;
	color: #888;
}

/*------------------staff-item----------------------*/
.staff-item {
	display: flex;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
	transition: background 0.2s ease;
}
.staff-item:last-child {
	border-bottom: none;
}

.staff-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 15px;
	flex-shrink: 0;
}
.staff-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.staff-content {
	flex-grow: 1;
}
.staff-content .name {
	display:flex;
	align-items:center;
	font-size: 15px;
	font-weight: 600;
	color: #222;
}
.staff-content .name small {
	font-size: 12px;
	color: #aaa;
	margin-left:auto;
}
.staff-content .action {
	font-size: 13px;
	color: #555;
}

/*------------------sayfaust----------------------*/

.sayfaust {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	grid-gap:10px;
}

/*------------------tablar----------------------*/

.tablar {
	display:flex;
	align-items:center;
	height:50px;
	padding:10px 10px;
	grid-gap:5px;
	background:#fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.tablar a {
	display:flex;
	align-items:center;
	grid-gap:4px;
	height:30px;
	padding:10px;
	font-size:14px;
	color:#000;
}
.tablar a.active {
	background:var(--anarenk);
	color:#fff;
}
.tablar a:hover {
	background:var(--gradient);
	color:#fff;
}
/*------------------ siparisitem ----------------------*/

.siparis-akis {
	position:relative;
	background: #fff;
	border-radius: 0px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	padding: 16px;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.siparis-akis:before {
	position:absolute;
	content:"";
	top:5px;
	left:5px;
	width:5px;
	height:calc(100% - 10px);
	background:rgba(0,0,0,0.5);
}
.siparis-akis.danger:before {
	background:var(--danger); /* Masaya göre renk dinamik yapılabilir */
}
.siparis-akis.success:before {
	background:var(--success); /* Masaya göre renk dinamik yapılabilir */
}
.siparis-akis.warning:before {
	background:var(--warning); /* Masaya göre renk dinamik yapılabilir */
}
.siparis-akis.info:before {
	background:var(--info); /* Masaya göre renk dinamik yapılabilir */
}
.siparis-akis.primary:before {
	background:var(--primary); /* Masaya göre renk dinamik yapılabilir */
}
.siparis-akis:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Başlık kısmı */
.siparis-akis .fw-bold {
	font-size: 17px;
	color: #333;
}

.siparis-akis .badge {
	font-size: 13px;
	padding: 5px 10px;
	border-radius: 0px;
	font-weight: 500;
	text-transform: capitalize;
}

/* Fiyat satırı */
.siparis-akis .text-muted span {
	color: #666;
}

/* Progress bar daha modern */
.siparis-akis .progress {
	height: 8px;
	background-color: #f1f1f1;
	border-radius: 50px;
	overflow: hidden;
}
.siparis-akis .progress-bar {
	border-radius: 50px;
	transition: width 0.4s ease;
}

/* Butonlar */
.siparis-akis a.badge {
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 30px;
	transition: all 0.2s ease;
	text-decoration: none;
}

.siparis-akis a.badge:hover {
	transform: scale(1.05);
	opacity: 0.9;
}


/*------------------ siparisitem ----------------------*/
.acik-adisyonlar {
	max-height: 100%;
	overflow-y: auto;
}

.acik-adisyonlar .adisyon-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
	transition: background 0.2s ease;
	cursor: pointer;
}
.acik-adisyonlar .adisyon-item:last-child {
	border-bottom: none;
}

.acik-adisyonlar .adisyon-item:hover {
	background-color: #f9f9f9;
}

.acik-adisyonlar .icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.acik-adisyonlar .info .masa {
	font-weight: 600;
	color: #333;
	font-size: 15px;
}
.acik-adisyonlar .info .fiyat {
	font-size: 13px;
	color: #666;
}


.urunkart {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	padding:15px;
	background:#fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.urunkart:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.urunkart .resim {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border:1px solid #f1f1f1;
}
.urunkart .bilgi {
	width: calc(100% - 60px);
	padding-left:10px;
}
.urunkart .bilgi .adi {
	font-size:14px;
	font-weight:500;
	line-height:22px;
	color:#000;
}
.urunkart .bilgi .fiyat {
	font-size:16px;
	font-weight:700;
	line-height:24px;
	color:var(--success);
}


.siparislistesi {
	display:flex;
	flex-direction:column;
	grid-gap:5px;
	padding-top: 15px;
	border-top:1px solid #eee;
}
.siparislistesi .siparisitem {
	display:flex;
	flex-wrap:wrap;
	padding:5px 0px;
}
.siparislistesi .siparisitem:last-child {
	border-bottom:0px solid #f1f1f1;
}
.siparislistesi .siparisitem .resim {
	width:60px;
	height:60px;
	object-fit:cover;
	object-position:center;
	border:#f1f1f1;
}
.siparislistesi .siparisitem .bilgi {
	width:calc(100% - 60px);
	padding-left:10px;
	display:flex;
	align-items:center;
	flex: 1;
}
.siparislistesi .siparisitem .bilgi .bilgisol {
	margin-right:auto;
}
.siparislistesi .siparisitem .bilgi .adi {
	font-size:14px;
	font-weight:500;
	color:#000;
	line-height:20px;
}
.siparislistesi .siparisitem .bilgi .fiyat {
	font-size:16px;
	font-weight:700;
	line-height:20px;
	color:var(--success);
}
.siparislistesi .siparisitem .bilgi .secenekler {
	font-size:12px;
	font-weight:400;
	color:rgba(0,0,0,0.5);
	line-height:16px;
}
.siparislistesi .siparisitem .bilgi select {
	height:30px;
}
#siparisdetay .siparis-ozet {
    position: fixed;
    bottom: 0;
    z-index: 1030;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 0px;
	border-top: 1px solid #eee;
	padding-top: 15px;
	width:calc(80% - 50px);
}
#siparisdetay .siparis-ozet .fixed-bottom {
}

#siparisdetay .siparis-ozet .ozet-kalem {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	padding: 6px 0;
}

#siparisdetay .siparis-ozet .ozet-kalem .baslik {
	font-weight: 500;
	color: #444;
}

#siparisdetay .siparis-ozet .ozet-kalem .tutar {
	font-weight: 600;
	font-size: 16px;
}

#siparisdetay .siparis-ozet .tutar.toplam {
	color: #000;
}

#siparisdetay .siparis-ozet .tutar.odenen {
	color: #28a745;
}

#siparisdetay .siparis-ozet .tutar.kalan {
	color: #dc3545;
}

#siparisdetay .siparis-butonlar {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
}

#siparisdetay .siparis-butonlar .btn {
	flex: 1;
}


#odemeekrani {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	margin-bottom:0px;
}

#odemeekrani.active {
	max-height: 1000px; /* İçeriğin yüksekliğine yetecek kadar bir değer ver */
	margin-bottom:20px;
}

#odemeekrani .ust-butonlar {
	display: flex;
	justify-content: space-between;
	gap: 5px;
	margin-bottom: 5px;
}
#odemeekrani .odeme-radios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 5px;
	margin-bottom: 5px;
}

#odemeekrani .odeme-secimi {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px;
	border: 2px solid #ccc;
	cursor: pointer;
	background: #fff;
	font-weight: 500;
	font-size: 14px;
	transition: all 0.2s ease;
	position: relative;
	text-align: center;
}

#odemeekrani .odeme-secimi input[type="radio"] {
	display: none;
}

#odemeekrani .odeme-secimi input[type="radio"]:checked + i,
#odemeekrani .odeme-secimi input[type="radio"]:checked ~ * {
	color: #28a745;
}

#odemeekrani .odeme-secimi input[type="radio"]:checked ~ i,
#odemeekrani .odeme-secimi input[type="radio"]:checked ~ span {
	color: #28a745;
}

#odemeekrani .odeme-secimi:has(input[type="radio"]:checked) {
	border: 2px solid #28a745;
}

#odemeekrani .ozet-kutular {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	text-align: center;
	margin-bottom: 5px;
}
#odemeekrani .ozet-kutular div {
	background: #fafafa;
	padding: 10px;
	font-size: 14px;
	cursor:pointer;
}
#odemeekrani .kirmizi { color: #dc3545; }
#odemeekrani .yesil { color: #28a745; }
#odemeekrani .mor { color: #6f42c1; }


#odemeekrani .numaratik .yuzdeler,
#odemeekrani .numaratik .sayilar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3px;
	margin-top: 5px;
}
#odemeekrani .numaratik button {
	padding: 10px;
	border: none;
	background: #e9e9e9;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
}
#odemeekrani .numaratik .sil { background: #dc3545; color: #fff; }
#odemeekrani .numaratik .temizle { background: #dc3545; color: #fff; }
#odemeekrani .numaratik .enter { background: #fd7e14; color: #fff; }


.masaliste {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	padding:8px;
	background:#fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	height:100%;
}
.masaliste:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.masaliste .resim  {
	width:80px;
	height:80px;
	object-fit:cover;
	object-position:center;
}
.masaliste .resim img {
	width:100%;
	height:80px;
	object-fit:cover;
	object-position:center;
}
.masaliste .bilgi {
	width:calc(100% - 80px);
	padding-left:10px;
	display:flex;
	flex-direction:column;
	grid-gap:3px;
}
.masaliste .bilgi .adi {
	font-size:16px;
	font-weight:600;
	line-height:20px;
	color:#000;
}
.masaliste .bilgi .kod {
	font-size:14px;
	font-weight:600;
	line-height:18px;
	color:rgba(0,0,0,0.5);
}

.urunliste {
	position:relative;
	display:flex;
	flex-direction:column;
	grid-gap:10px;
	padding:10px;
	background:#fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.urunliste:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.urunliste .resim {
	position:relative;
}
.urunliste .resim img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	object-position:center;
}
.urunliste .resim .fiyat {
	position:absolute;
	top:5px;
	right:5px;
	padding:5px 10px;
	background:var(--success);
	font-size:18px;
	color:#fff;
}
.urunliste .resim .stok {
	position:absolute;
	top:45px;
	right:5px;
	padding:5px 10px;
	background:var(--info);
	font-size:12px;
	color:#fff;
}
.urunliste .resim .btn {
	position:absolute;
	top:5px;
	left:5px;
}
.urunliste .resim .form-check {
	position:absolute;
	top:5px;
	left:5px;
}
.urunliste .bilgi  {
	display:flex;
	flex-direction:column;
	grid-gap:5px;
}
.urunliste .bilgi .adi {
	font-size:16px;
	font-weight:600;
	line-height:20px;
	color:#000;
}
.urunliste .bilgi .grup {
	font-size:14px;
	font-weight:600;
	line-height:18px;
	color:rgba(0,0,0,0.5);
}
.urunliste2 {
	background: #fff;
	border-radius: 0px;
	overflow: hidden;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	position: relative;
	cursor: pointer;
}
.urunliste2:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	transform: translateY(-3px);
}

/* Resim Alanı */
.urunliste2 .resim {
	position: relative;
	overflow: hidden;
}
.urunliste2 .resim img.urun-img {
	width: 100%;
	display: block;
	transition: transform 0.4s ease;
}
.urunliste2:hover .resim img.urun-img {
	transform: scale(1.08);
}

/* Etiketler */
.urunliste2 .etiketler {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	z-index: 2;
}
.urunliste2 .etiket {
	font-size: 13px;
	padding: 4px 8px;
	border-radius: 0px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: 500;
}
.urunliste2 .etiket.fiyat {
	background: #ff7f11;
}
.urunliste2 .etiket.yesil {
	background: var(--success);
}
.urunliste2 .etiket.mavi {
	background: var(--primary);
}
.urunliste2 .etiket.kirmizi {
	background: var(--danger);
}

/* Düzenle Butonu */
.urunliste2 .btn-duzenle {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 6px 8px;
	border-radius: 0px;
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 2;
}
.urunliste2:hover .btn-duzenle {
	opacity: 1;
}

/* Checkbox */
.urunliste2 .checkbox-kutu {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.85);
	padding: 4px 8px;
	border-radius: 6px;
}

/* Bilgi Alanı */
.urunliste2 .bilgi {
	padding: 12px;
}
.urunliste2 .adi {
	font-weight: 600;
	font-size: 16px;
	color: #333;
	margin-bottom: 8px;
}
.urunliste2-detaylar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.urunliste2-detaylar .etiket {
	background: #f1f1f1;
	color: #555;
	font-size: 12px;
	border-radius: 6px;
	padding: 3px 6px;
}
.urunliste2-detaylar .etiket i {
	color: #999;
	font-size: 13px;
}

#listelemegenel {
	
}
#listelemegenel .listetab {
	display:none;
}
#listelemegenel .listetab.active {
	display:block;
}
.clr-field {
    display: block !important;
}
.clr-field button {
    width: 50px !important;
}
.clr-picker {
	z-index: 9999 !important;
}

.qty-container {
	display: flex;
	align-items: center;
    justify-content: space-between;
	border: 1px solid #ddd;
	border-radius: 0px;
	overflow: hidden;
	width: 130px;
}

.qty-container button {
	background: #f5f5f5;
	border: none;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	height:50px;
}

.qty-container input {
	border: none;
	width: 50px;
	text-align: center;
	outline: none;
}