@import url("base.css");

@import url("header.css");

@import url("hero.css");

@import url("menu.css");

@import url("slider.css");

@import url("auto-slider.css");

@import url("products/gallery.css");
@import url("products/modal.css");

@import url("footer.css");





/* FEATURES */
.features{
display:flex;justify-content:center;gap:50px;
padding:25px;background:#111;color:#ccc;
border-top:1px solid #222;border-bottom:1px solid #222;
}

/* PRODUCTS */
.products{
padding:100px 50px;display:flex;
justify-content:center;gap:40px;flex-wrap:wrap;
}

.card{
background:#1a1a1a;padding:20px;width:260px;
border-radius:15px;text-align:center;
opacity:0;transform:translateY(60px);
transition:0.8s cubic-bezier(.17,.67,.83,.67);
cursor:pointer;
}
.card.show{opacity:1;transform:translateY(0);}

.card img{
width:100%;height:180px;object-fit:cover;border-radius:10px;
}

.card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 0 20px rgba(255,215,0,0.3);
}

/* SLIDER */
.slider{margin:80px 0;overflow:hidden;}
.track{display:flex;gap:25px;transition:1s ease;}

.slide{
min-width:260px;
opacity:0;
transform:translateY(60px);
transition:0.8s;
cursor:pointer;
}
.slide.show{opacity:1;transform:translateY(0);}

.slide img{
width:100%;height:200px;object-fit:cover;border-radius:12px;
}

/* BRAND */
.brand{
text-align:center;padding:100px 20px;
background:linear-gradient(to top,#0d0d0d,#151515);
}
.brand h2{font-size:40px;margin-bottom:15px;}
.brand p{color:#aaa;max-width:500px;margin:auto;line-height:1.8;}

/* CONTACT BUTTON */
.contact-btn{
display:block;margin:80px auto;padding:15px 40px;
background:gold;color:black;text-align:center;
border-radius:8px;font-weight:bold;cursor:pointer;
width:250px;transition:0.3s;
}
.contact-btn:hover{transform:scale(1.1);}









@media (max-width:768px){

header{
flex-direction:column;
gap:10px;
padding:15px;
}

nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
}



/* محصولات */
.products{
padding:60px 20px;
gap:20px;
}

.card{
width:100%;
max-width:320px;
}

/* اسلایدر */
.slide{
min-width:200px;
}

.track{
gap:15px;
}

/* دکمه تماس */
.contact-btn{
width:80%;
}

/* برند */
.brand h2{
font-size:28px;
}

}
/* ===== RTL Fix ===== */

body{
direction:rtl;
text-align:right;
}

header{
flex-direction:row-reverse;
}

nav a{
margin:0 10px;
}



.products{
text-align:center;
}

.track{
direction:ltr;
}

.slider button{
direction:ltr;
}





/* حرکت فقط افقی */


/* لوگو */
/* ===== PRELOADER ===== */

#preloader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.logo-mask{
width:160px;
overflow:hidden;
}

#preLogo{
width:160px;
clip-path: inset(0 100% 0 0);
animation:enterLogo 1.2s ease forwards;
}

/* ورود لوگو */
@keyframes enterLogo{
0%{
clip-path: inset(0 100% 0 0);
transform:translateX(-80px);
opacity:0;
}
100%{
clip-path: inset(0 0 0 0);
transform:translateX(0);
opacity:1;
}
}

.auth{
  text-align:center;
  padding:80px 20px;
}

.auth h2{
  margin-bottom:20px;
}

.auth input{
  display:block;
  margin:10px auto;
  padding:12px;
  width:250px;
  border:none;
  border-radius:6px;
}

.auth button{
  margin-top:15px;
}



/* ===== TOAST NOTIFICATION ===== */

#toast{
position:fixed;
bottom:50px;
right:30px;
background:#111;
color:white;
padding:15px 25px;
border-radius:10px;
box-shadow:0 0 20px rgba(255,215,0,0.2);
font-size:14px;
opacity:0;
transform:translateY(20px);
transition:0.4s;
z-index:9999;
}

#toast.show{
opacity:1;
transform:translateY(0);
}

@media (min-width:1024px){

/* هدر حرفه‌ای فقط دسکتاپ */
header{
flex-direction:row-reverse;
padding:20px 80px;
}

/* لوگو */
.logo{
width:130px;
}

/* منو */
nav{
display:flex;
gap:30px;
}

/* لینک‌ها */
nav a{
font-size:17px;
position:relative;
}

/* افکت خط */
nav a::after{
content:"";
position:absolute;
bottom:-5px;
right:0;
width:0;
height:2px;
background:gold;
transition:0.3s;
}

nav a:hover::after{
width:100%;
}

}

.auth.active{
box-shadow:0 0 25px rgba(255,215,0,0.4);
transform:scale(1.02);
transition:0.4s;
}

#toast{
position:fixed;
bottom:-100px;
left:50%;
transform:translateX(-50%);
background:#111;
color:white;
padding:14px 28px;
border-radius:10px;
box-shadow:0 0 20px rgba(255,215,0,0.3);
font-size:14px;
z-index:9999;
opacity:0;
transition:0.5s;
border:1px solid rgba(255,215,0,0.2);
}

#toast.show{
bottom:30px;
opacity:1;
}

/* ===== منوی حرفه‌ای موبایل ===== */



/* ===== TOUCH EFFECT ===== */

.card:active{
transform:scale(0.95);
box-shadow:0 0 10px rgba(255,215,0,0.2);
transition:0.05s;
}

/* برای موبایل نرم‌تر */
.card{
transition:0.2s;
}

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

.ripple{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,0.4);
transform:scale(0);
animation:ripple 0.6s linear;
}

@keyframes ripple{
to{
transform:scale(4);
opacity:0;
}
}

/* هدر */


/* اسلایدر */
/* اسلایدر RTL واقعی */


.mini-bar{
display:flex;
justify-content:center;
gap:40px;
padding:15px 40px;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(10px);
border-top:1px solid #222;
border-bottom:1px solid #222;
}

.mini-item{
color:#ccc;
font-size:14px;
position:relative;
transition:0.3s;
cursor:default;
}

/* اکت طلایی مثل هدر */
.mini-item:hover{
color:gold;
transform:translateY(-2px);
}

.mini-item::after{
content:"";
position:absolute;
bottom:-4px;
right:0;
width:0;
height:1px;
background:gold;
transition:0.3s;
}

.mini-item:hover::after{
width:100%;
}

/* سکشن هر اسلایدر */
/* سکشن هر اسلایدر */


/* هدر اسلایدر */



.stories{
display:flex;
gap:15px;
overflow-x:auto;
padding:15px 20px;
margin-top:20px;
}

.story{
flex:0 0 auto;
text-align:center;
cursor:pointer;
}

.story img{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
border:2px solid gold;
padding:2px;
transition:0.3s;
}

.story span{
display:block;
margin-top:6px;
font-size:12px;
color:#ccc;
}

.story:active img{
transform:scale(0.9);
}



/* ===== انیمیشن حکاکی زیر لوگو ===== */
.wood-carving-animation {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 1002;
}

.carving-line {
  stroke-dasharray: 0 150;
  animation: carve 2s ease-in-out forwards;
}

@keyframes carve {
  0%   { stroke-dasharray: 0 150; }
  100% { stroke-dasharray: 150 150; }
}

.wood-chip {
  opacity: 0;
  animation: chip-fall 0.5s ease-out forwards;
}
.wood-chip:nth-child(2) { animation-delay: 0.3s; }
.wood-chip:nth-child(3) { animation-delay: 0.6s; }
.wood-chip:nth-child(4) { animation-delay: 0.9s; }

@keyframes chip-fall {
  0%   { opacity: 0; transform: translateY(0); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

.carving-text {
  color: #D4AF37;
  font-family: 'Vazir', sans-serif;
  font-size: 14px;
  margin-top: 10px;
  opacity: 0;
  animation: fadeInText 0s ease-out 1s forwards;
}

@keyframes fadeInText {
  to { opacity: 1; }
}

/* ===== LOADING DOTS ===== */



</style>