*{
	margin: 0;
	padding: 0;
}

body{
	overflow-y: auto;
	overflow-x: hidden;
	background: #26292f;
}
   a {
        text-decoration: none;
        /*确保在浏览器中显示链接时，没有任何文本装饰，如下划线。*/
    }

.putunbat{
	max-width: 640px;
	min-width: 300px;
	margin: 0 auto;	
}
.container {
            width: 100%;
            height: 50px;
			background: #232428;
			display: flex;
			justify-content: space-between;
			align-items: center;
        }
		.container_isim{
			width: 30%;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: aliceblue;
			margin-left: -20px;
			font-family: "微软雅黑", sans-serif;
		}
		.container_balga{
			width: 20%;
			height: 30px;
			background: #1c1d21;
			margin-right: 10px;
			border-radius: 30px;
			border: 1px solid #55565a;
			display: flex;
			justify-content: space-around;
			align-items: center;
			
		}
		.container_balga img:nth-child(1){
			width: 25px;
			height: 25px;
		}
		.container_balga img:nth-child(2){
			width: 1px;
			height: 20px;
			background: #56575b;
		}
		.container_balga img:nth-child(3){
			width: 15px;
			height: 15px;
		}
		.izdax{
			width: 80%;
			height: 40px;
			margin: 0 auto;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
    /* 搜索输入框 */
    .search-container {
            position: relative;
            width: 65%; /* 限制搜索框宽度，可根据需要调整 */
            height: 30px;
        }
    /* 搜索输入框 - 关键调整：增大右侧内边距，拉开与图标的距离 */
        .search-input {
            width: 100%;
            height: 30px;
            /* 右侧内边距从 44px 调整为 56px，增加12px间距 */
            padding: 0 35px 0 0px; 
            border: none;
            border-radius: 24px;
            background-color: #3b3c45;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            font-size: 16px;
            color: #333333;
            outline: none;
            transition: all 0.3s ease;
            font-family: "ALKATIP Tor Tom", sans-serif;
            direction: rtl; /* 维吾尔语从右向左输入 */
            text-align: right; /* 文字右对齐 */
			margin-top: 2px;
			padding-top: 5px;
        }
        
        /* 聚焦状态 */
        .search-input:focus {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            transform: translateY(-1px);
        }
        
        /* 占位符样式 - 适配右向文字 */
        .search-input::placeholder {
            color: #999999;
            direction: rtl;
            text-align: right;
        }
        
        /* 搜索图标 - 微调位置，配合输入框内边距 */
        .search-icon {
            position: absolute;
            /* 从 16px 调整为 24px，向右移动8px，增加间距 */
            right: 10px; 
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            color: #999999;
            pointer-events: none; /* 防止遮挡输入 */
        }
        
        /* 清除按钮 - 移到左侧 */
        .clear-btn {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            color: #999999;
            cursor: pointer;
            display: none;
            transition: color 0.2s ease;
        }
        
        /* 鼠标悬停清除按钮变色 */
        .clear-btn:hover {
            color: #ff4444;
        }
        
        /* 有输入内容时显示清除按钮 */
        .search-input:not(:placeholder-shown) ~ .clear-btn {
            display: block;
        }
		.izdax_kunupka{
			width: 25%;
			height: 25px;
			border-radius: 50px;
			border: 1px solid #3b3c45;
			display: flex;
			color: #e4e4e4;
			justify-content: space-around;
			align-items: center;
			
		}
		.izdax_kunupka p{
			display: flex;
			font-size: 0.8rem;
			font-family: "ALKATIP Tor Tom";
			padding-top: 5px;
		}
		   /* 轮播图样式 - 新的唯一类名 */
		   .carousel-banner {
            width: 90%;
            height: 200px; /* 适配移动端，可自行调整 */
            overflow: hidden;
            position: relative;
            margin: 10px 0;
            border-radius: 15px;
			margin: 0 auto;
			margin-top: 10px;
        }
        .carousel-slides {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .carousel-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        .carousel-slide.active {
            opacity: 1;
        }
        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
			border-radius: 25px;
        }
        .carousel-indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 10;
        }
        .carousel-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .carousel-indicator.active {
            background-color: #fff;
        }
		.banner_qikit{
			width: 150px;
			height: 80px;
			background-color: #262930;
			clip-path: polygon(
                0 50%,   /* 左上：x=0，y=50%（即中间高度） */
                100% 50%,/* 右上：x=100%，y=50% */
                90% 20%, /* 右凸起：x=90%，y=20%（凸起的右上角） */
                10% 20%, /* 左凸起：x=10%，y=20%（凸起的左上角） */
                0 50%    /* 左下：x=0，y=50%（闭合形状） */
            );
			display: flex;
 			justify-content: center; /* 水平居中 */
 			align-items: center;     /* 垂直居中 */
  			gap: 8px;                /* 可选：控制p标签之间的间距，比margin更均匀 */
  			/* 定位：固定在banner底部中间 */
  			position: absolute;
  			bottom: -40px;
  			left: 50%;
 			transform: translateX(-50%);
  			z-index: 2;
		}
		.hodong{
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			margin-top: 15px;
		}
		.hodong_left{
			width: 50%;
			height: 170px;
			background: black;
			border-radius: 15px;
			display: flex;
			object-fit: cover;
		}
		.hodong_left img{
			width: 100%;
			
		}
		.hodong_right{
			width: 35%;
			height: 170px;
		}
		.hodong_right1{
			width: 100%;
			height: 80px;
			position: relative;
			display: inline-block;
		}
		.hodong_right1 img{
			width: 100%;
			height: 80px;
			object-fit: cover;
			border-radius: 10px;
		}
		.hodong_right1 p{
			width: 50px;
			height: 20px;
			background: red;
			position: absolute;
			right: 0px;
			border-radius: 0 15px 0 15px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.hodong_right1 p img{
			width: 40px;
			height: 10px;
			color: white;
			object-fit: cover;
		}
		.hodong_right2{
			width: 100%;
			height: 80px;
			background: #aaa;
			margin-top: 10px;
			border-radius: 10px;
			position: relative;
			display: inline-block;
		}
		.hodong_right2 img{
			width: 100%;
			height: 80px;
			border-radius: 10px;
			object-fit: cover;
		}
		.hodong_right2 p{
			width: 50px;
			height: 20px;
			background: linear-gradient(to right, #feee95, #e9b62c);
			position: absolute;
			right: 0px;
			border-radius: 0 15px 0 15px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.hodong_right2 p img{
			width: 35px;
			height: 10px;
			color: white;
			object-fit: cover;
		}
		/* <!-- 精品推荐 --> */
		.boutique{
			width: 100%;
			height: 85px;
			margin-top: 15px;
			display: flex;
			justify-content: space-evenly;
			
		}
		.boutique_1{
			width: 28%;
			height: 80px;
			background: linear-gradient(90deg, #5a4e84, #332d49);
			border-radius: 15px;
			position: relative;
			direction: rtl;
		}
		.boutique_1 img{
			width: 100%;
			height: 80px;
			object-fit: cover;
			border-radius: 15px;
		}
		.poutique_1_text{
			position: absolute; /* 脱离文档流，覆盖在 img 上 */
			top: 0;    /* 顶部对齐 img */
			right: 15px;
			left: 10px;   /* 左侧对齐 img */
			width: 100%; /* 宽度和 img 一致 */
			height: 100%; /* 高度和 img 一致 */
			 /* 以下是可选样式，方便你看到覆盖层效果 */
			color: #fff; /* 覆盖层文字颜色 */
			display: flex; /* 内部内容居中（可选） */
			flex-direction: column;
			justify-content: center;
			font-size: 1.2rem;
			font-family: "ALKATIP Tor Tom";
			margin-top: 5px;
		}
		.poutique_1_text p:nth-child(3){
			font-size: 0.6rem;
			font-weight: bold;
		}
		.boutique_2{
			width: 28%;
			height: 80px;
			background: linear-gradient(90deg, #ad830c, #f7d516);
			border-radius: 15px;
			position: relative;
			direction: rtl;
		}
		.boutique_2 > img{
			width: 100%;
			height: 80px;
			object-fit: cover;
			border-radius: 15px;
		}
		.poutique_2_text{
			position: absolute; /* 脱离文档流，覆盖在 img 上 */
			top: 0;    /* 顶部对齐 img */
			left: 10px;   /* 左侧对齐 img */
			right: 15px;
			width: 100%; /* 宽度和 img 一致 */
			height: 100%; /* 高度和 img 一致 */
			 /* 以下是可选样式，方便你看到覆盖层效果 */
			color: #1a1a19; /* 覆盖层文字颜色 */
			display: flex; /* 内部内容居中（可选） */
			flex-direction: column;
			justify-content: center;
			font-size: 1rem;
			font-family: "ALKATIP Tor Tom";
			margin-top: 5px;
			font-weight: bold;
		}
		.poutique_2_text p:nth-child(3){
			font-size: 0.6rem;
		}

		/* vip窗口css */

		/* 按钮流光效果 */
		.boutique_2::after {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
			transition: left 0.8s ease;
		  }
	  
		  .boutique_2:hover::after {
			left: 100%;
		  }
	  
		  .boutique_2:active {
			transform: scale(0.97);
			box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
		  }
	  
		  /* 弹窗蒙层 */
		  .vip-modal-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.75);
			display: flex;
			align-items: flex-start; /* 取消垂直居中，改为顶部对齐 */
			justify-content: center;
			padding-top: 10vh; /* 原12vh → 增大数值让弹窗更往下，手机端生效 */
			z-index: 1000;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.4s ease, visibility 0.4s ease;
			backdrop-filter: blur(2px);
			font-family: "ALKATIP Tor Tom";
		  }
	  
		  .vip-modal-mask.active {
			opacity: 1;
			visibility: visible;
		  }
	  
		  /* 弹窗内容 */
		  .vip-modal-content {
			width: 80%;
			max-width: 380px;
			background-color: #fff;
			border-radius: 20px;
			padding: 28px 24px;
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
			transform: translateY(-20px) scale(0.98);
			transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
			position: relative;
			overflow: hidden;
		  }
	  
		  .vip-modal-mask.active .vip-modal-content {
			transform: translateY(0) scale(1);
		  }
	  
		  /* 弹窗标题（高级VIP图标） */
		  .vip-modal-title {
			font-size: 22px;
			font-weight: 700;
			color: #222;
			text-align: center;
			margin-bottom: 24px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
		  }
	  
		  .vip-modal-title .vip-icon {
			font-size: 24px;
			background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			filter: drop-shadow(0 0 2px #FFA500);
			animation: pulse 2s infinite alternate;
		  }
	  
		  @keyframes pulse {
			from { transform: scale(1); }
			to { transform: scale(1.1); }
		  }
	  
		  .vip-modal-close {
			position: absolute;
			top: -8px;
			right: 0;
			width: 36px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			font-size: 24px;
			color: #ccc;
			cursor: pointer;
			border-radius: 50%;
			transition: all 0.4s ease;
			font-weight: 300;
		  }
	  
		  .vip-modal-close:hover {
			background-color: #f8f8f8;
			color: #FF8C00;
			transform: rotate(90deg);
		  }
	  
		  /* 套餐列表 */
		  .vip-package-list {
		    display: none;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;
			margin-bottom: 28px;
		  }
	    .vip-modal-mask.active .vip-package-list {
    display: grid; /* 弹窗显示时，用grid布局展示列表 */
}
		  /* 套餐项样式（彩色幻彩流星边框+原配色打勾） */
		  .vip-package-item {
			background-color: #f9f9f9;
			border: 2px solid #f1f1f1;
			border-radius: 16px;
			padding: 20px 14px;
			text-align: center;
			cursor: pointer;
			transition: all 0.4s ease;
			position: relative;
			overflow: hidden;
			box-sizing: border-box;
		  }
	  
		  .vip-package-item.active {
			border-color: transparent;
			background: linear-gradient(135deg, #FFF8DC 0%, #FFF3E0 100%);
			box-shadow: 0 4px 12px rgba(255, 165, 0, 0.1);
			position: relative;
		  }
	  
		  .vip-package-item.active::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 14px;
			padding: 2px;
			background: linear-gradient(90deg, #FF3366, #FF9900, #FFCC00, #33CC33, #3399FF, #9933FF, #FF3366);
			background-size: 300% 100%;
			animation: shimmer 3s linear infinite;
			-webkit-mask: 
			  linear-gradient(#fff 0 0) content-box, 
			  linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			z-index: 0;
		  }
	  
		  @keyframes shimmer {
			0% { background-position: 0% 0; }
			100% { background-position: 300% 0; }
		  }
	  
		  .vip-package-item.active::after {
			content: '✓';
			position: absolute;
			top: 0;
			right: 0;
			width: 24px;
			height: 24px;
			background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
			border-radius: 0 14px 0 14px;
			color: #fff;
			font-size: 14px;
			font-weight: bold;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: center;
		  }
	  
		  .vip-package-item .package-content {
			position: relative;
			z-index: 1;
		  }
	  
		  .vip-package-item:hover {
			border-color: #FFCC80;
			background-color: #FFF8DC;
			transform: translateY(-2px);
		  }
	  
		  .package-name {
			font-size: 15px;
			color: #333;
			font-weight: 600;
			margin-bottom: 6px;
		  }
	  
		  .package-price {
			font-size: 20px;
			color: #FF6B35;
			font-weight: 700;
			margin-bottom: 4px;
		  }
	  
		  .package-desc {
			font-size: 12px;
			color: #888;
			margin-top: 4px;
			line-height: 1.2;
		  }
	  
		  /* 确认按钮 */
		  .vip-confirm-btn {
			width: 100%;
			height: 52px;
			line-height: 52px;
			text-align: center;
			background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
			color: #fff;
			border-radius: 26px;
			border: none;
			font-size: 17px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.4s ease;
			box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2);
			position: relative;
			overflow: hidden;
			font-family: "ALKATIP Tor Tom";
		  }
	  
		  .vip-confirm-btn::after {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
			transition: left 0.8s ease;
		  }
	  
		  .vip-confirm-btn:hover::after {
			left: 100%;
		  }
	  
		  .vip-confirm-btn:active {
			transform: scale(0.98);
			background: linear-gradient(135deg, #E6C200 0%, #E69500 50%, #E67C00 100%);
			box-shadow: 0 2px 8px rgba(255, 140, 0, 0.2);
		  }
		
		.vip-package-item {
    cursor: pointer;
    transition: all 0.3s;
}
#vipBtn {
    pointer-events: auto !important; /* 强制开启点击事件 */
    z-index: 9999 !important; /* 置顶，避免被遮挡 */
    opacity: 1 !important; /* 确保按钮可见 */
    position: relative !important;
}

/* 强制修复VIP弹窗层级 */
#vipModal {
    z-index: 99999 !important; /* 弹窗置顶 */
    pointer-events: auto !important;
}

/* 移除所有可能拦截点击的样式 */
.boutique, .boutique_2 {
    pointer-events: none !important;
}
#vipBtn * {
    pointer-events: none !important; /* 按钮内子元素不拦截点击 */
}
		.boutique_3{
			width: 28%;
			height: 80px;
			background: linear-gradient(90deg, #3b3b3b, #131513);
			border-radius: 15px;
			position: relative;
			justify-content: center;
			direction: rtl;
		}
		.boutique_3 > img{
			width: 100%;
			height: 80px;
			object-fit: cover;
			border-radius: 15px;
		}
		.poutique_3_text{
			position: absolute; /* 脱离文档流，覆盖在 img 上 */
			top: 0;    /* 顶部对齐 img */
			left: 10px;   /* 左侧对齐 img */
			right: 15px;
			width: 100%; /* 宽度和 img 一致 */
			height: 100%; /* 高度和 img 一致 */
			 /* 以下是可选样式，方便你看到覆盖层效果 */
			color: #fff; /* 覆盖层文字颜色 */
			display: flex; /* 内部内容居中（可选） */
			flex-direction: column;
			justify-content: center;
			font-size: 1rem;
			font-family: "ALKATIP Tor Tom";
			margin-top: 5px;
			font-weight: bold;
		}
		.poutique_3_text p:nth-child(3){
			font-size: 0.6rem;
			background:linear-gradient(to right, #ad830c, #f7d516);
			background-clip:text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.poutique_3_text1{
			background:linear-gradient(to right, #ad830c, #f7d516);
			background-clip:text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.popular{
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			padding: 0 30px;
			align-items: center;
			box-sizing: border-box;
			font-family: "ALKATIP Tor Tom";
			direction: rtl;
			
		}
		.popular_text{
			width: 40%;
			height: 30px;
			box-sizing: border-box;
			color: white;
		}
		.popular_right{
			width: 20%;
			height: 25px;
			border: 1px solid #3b3c45;
			border-radius: 50px;
			text-align: center;
			line-height: 30px;
			color: #848484;
			font-size: 0.8rem;
		}
		.show{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap; 
			direction: rtl;
			padding: 0 15px; 
			gap: 20px;
			box-sizing: border-box;
		}
		.shou_rasim{
			width: calc(33.333% - 13.333px);
			min-height: 120px;
			position: relative; 
			z-index: 1;
			display: inline-block;
			display: block;
		}
		.shou_rasim_title {
            position: relative !important;
            height: 140px; /* 添加固定高度 */
            overflow: hidden; /* 防止内容溢出 */
        }
		.shou_rasim_title img{
			width: 100%;
			height: 140px;
			object-fit: cover;
			border-radius: 10px;
		}
		.shou_rasim_title p{
			position: absolute; /* 绝对定位，相对于.shou_rasim */
			top: 8px; /* 距离图片顶部的间距 */
			right: 8px; /* 距离图片右侧的间距 */
			margin: 0; /* 清除p标签默认的上下外边距，避免位置偏移 */
			padding: 4px 8px; /* 可选：p标签内边距，让文字更美观 */
			background-color: rgba(0, 0, 0, 0.5); /* 可选：半透明背景，突出文字 */
			color: #fff; /* 文字白色 */
			font-size: 14px;
			z-index: 2;
			border-radius: 5px; /* 可选：p标签圆角 */
		}
		.shou_rasim_text{
			width: 100%;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-family: "ALKATIP Tor Tom";
			font-size: 0.6rem;
			overflow: hidden;
/* 			font-weight: bold; */
			margin-top: 5px;
		}
		.shou_rasim_text p:nth-child(2){
			width: 50%;
			height: 20px;
			background: #3b3c45;
			border-radius: 30px;
			text-align: center;
			padding-top: 5px;
			color: #ffdf7c;
			font-size: 0.8rem;
		}
		.arlik{
			width: 100%;
			height: 80px;
		}
		
				.tizimlat-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.7);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999; /* 确保弹窗在最上层 */
		  }
		  
		  .tizimlat-content {
			width: 80%;
			max-width: 350px;
			background-color: #fff;
			border-radius: 10px;
			padding: 30px 20px;
			text-align: center;
			font-family: "ALKATIP Tor Tom";
		  }
		  
		  .tizimlat-btn {
			width: 100%;
			height: 45px;
			background-color: #f44336; /* 红色按钮，和图片一致 */
			color: #fff;
			border: none;
			border-radius: 5px;
			font-size: 18px;
			font-family: "ALKATIP Tor Tom";
			cursor: pointer;
		  }
		  
		  .tizimlat-btn:active {
			background-color: #d32f2f;
		  }