@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600;700;800;900&display=swap');

/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
html{height:100%; font-size:16px; font-weight: 400; font-style: normal; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';}

/* VARIABLES */
:root {
--radius:18px;
--default: #007aff;
--beyaz: #ffffff;
--sari: #faed38;
--kirmizi: #d50000;
--mavi: #007aff;
--turuncu: #ff6610;
--turkuaz: #23bbe2;
--dark: #474962;
--dark-text:#6a6a6a;
--light: #edf2f6;
--border-color: #ebebeb;
--gri: #9a9a9a;



}

body {background-color:#fff; height:100%; color: var(--dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a {text-decoration: none; color: var(--dark);}
.blur {border-radius: 0.75rem !important; backdrop-filter: blur(16px)!important; background-color: rgb(255 255 255 / .6) !important;}
.cover {-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center;}

/* page-titles */
.page-titles {width:80%; height:auto; margin:30px 10% 0 10%; display: flex; justify-content: flex-start; align-items: center;}
.page-titles h1 {font-size:1.3rem; font-weight:400; padding:8px 0%; color:#9e9e9e;}


.breadcrumb {display: flex; align-items: center; flex-wrap: wrap; gap:6px; padding:10px 10%; background-color:var(--turuncu); border-bottom: 1px solid #ebebeb; font-size: 14px;}
.breadcrumb a {color:var(--beyaz); text-decoration: none; padding: 4px 6px; border-radius: 4px; transition: all 0.2s ease;}
.breadcrumb a:hover {color:var(--beyaz);}
.breadcrumb span {color:var(--beyaz); font-weight: 500;}
.breadcrumb a::after {content: "›"; margin-left: 8px; color:var(--white);}

/*top*/
.top{display:none;}


/* HEADER */
.icsayfa{background-codlor:rgba(0,0,0,0.9)!important;}
.header {width:80%; height:110px; padding:14px 10%; z-index:999; display:flex; justify-content:space-between; transition: transform 0.35s ease; align-items: center; position:relative;}
.header ul:nth-child(1){width:auto; height:auto; line-height: 40px; display: flex; justify-content:start; flex: 1;}
.header ul:nth-child(1) li{}
.header ul:nth-child(1) li a{background-color:var(--turuncu); border:2px solid var(--turuncu); color:var(--beyaz); transition: 0.3s ease; margin-right: 8px; padding:6px 9px; transition: 0.3s ease; border-radius:5px;}
.header ul:nth-child(1) li a:Hover{background-color:rgba(0,0,0,0); border:2px solid var(--beyaz);}
.header ul:nth-child(2){width:auto; height:auto;  display:flex; align-items: center; justify-content:center;   flex: 1;}
.header ul:nth-child(2) li{width:auto; height:auto; display: flex; align-items: center;}
.header ul:nth-child(2) li img{width:auto; height:110px;}
.header ul:nth-child(2) li a{color:white; margin:0 16px; text-shadow: 1px 1px 5px black;display: flex; align-items: center; line-height: 40px; position: relative; font-size:0.96rem; font-weight:600;}
.header ul:nth-child(2) li a::before{width:0; height:1px; left:0; top:0; position:absolute; content:""; background-color: white; transition: 0.3s ease;}
.header ul:nth-child(2) li a:Hover::before{width:100%; left:0; top:0; position:absolute;}
.header ul:nth-child(2) li:nth-child(1){order:3;}
.header ul:nth-child(2) li:nth-child(1) a:Hover::before{width:0%!important; left:0; top:0; position:absolute;}
.header ul:nth-child(2) li:nth-child(2){order:1;}
.header ul:nth-child(2) li:nth-child(3){order:2;}
.header ul:nth-child(2) li:nth-child(4){order:4;}
.header ul:nth-child(2) li:nth-child(5){order:5;}
.header ul:nth-child(3){width:auto; height:auto; line-height:32px; display:flex; justify-content: end; flex: 1;}
.header ul:nth-child(3) li a{padding:6px 9px; background-color:var(--turuncu);  border:2px solid var(--turuncu); transition: 0.3s ease; color: white; border-radius:5px;}
.header ul:nth-child(3) li a:Hover{background-color:rgba(0,0,0,0); border:2px solid var(--beyaz);}

#hamburger{display:none;}
.header #closeSidebar{display:none;}
.header::after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 200px;
    content: "";
    opacity: 1;
    z-index: -1;
    pointer-events: none;
    background: url(../images/header-mask.png) repeat-x;
}

/*Hero*/
.hero {width:50%; display: flex; padding:80px 25%; flex-direction: column; text-align: center;}
.hero h2{font-family: "Great Vibes", cursive; font-weight:400; font-style: normal; margin:1rem 0; font-size: 3rem;}
.hero p{font-family: "Courgette", cursive; font-weight: 400; font-style: normal;}




/*sliderSwiper*/

.swiper {width:100%; height:100vh; margin-top:-138px; z-index:0; position: relative; overflow: hidden;}
.sliderSwiper {width:100%; height:100%;}
.swiper-slide {height: 100%;}
.slider-card {text-align: center; background-color: #fff;}
.slider-card img {width: 100%; height:auto; object-fit: contain;}
.sliderSwiper .swiper-slide-active{font-weight:600;}/*onemli*/
.sliderSwiper .swiper-slide {opacity: 0.6; transition: opacity 0.3s ease;}
.sliderSwiper .swiper-slide-active {opacity: 1;}
.sliderSwiper .swiper-button-next,.sliderSwiper .swiper-button-prev {color:var(--dark); display: none !important;}
.sliderSwiper .swiper-pagination-bullet {background-color: #000; opacity: 0.3;}
.sliderSwiper .swiper-pagination-bullet-active {background-color: #ff0000; opacity: 1;}


/*blog*/
.blog {width:80%; margin:30px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:20px;}
.blog-card {background: white; border: 1px solid var(--border-color); overflow: hidden; transition: 0.3s ease; border-radius: 5px;}
.blog-card:hover {transition: all .2s ease-out; border:1px solid var(--turuncu); will-change: transform; transform: translateY(-10px); box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125) !important;}
.blog-card img.cover {width:90%; height:180px; object-fit: cover; margin-bottom:10px; padding:5%;}
.blog-badge {background: #ffffff; color: #999; padding:6px 16px; border-radius:20px; font-size:10px; font-weight:300; letter-spacing:1px; display: inline-block; margin-top: -15px; margin-left: 15px; border: 1px solid #ddd;}
.blog-content {padding:10px 20px 30px; min-height:10px; display: flex; flex-direction: column;}
.blog-content h3 {font-size:18px; margin-bottom: 10px; font-weight:500; height:48px;}
.blog-content h3 a{color: var(--dark);}
.blog-content h3 a:Hover{text-decoration: underline;}
.blog-card:hover .blog-detail-btn {background-color:var(--turuncu); color: #fff; border: 1px solid var(--turuncu);}

/*kategoriler*/
.kategoriler {width:80%; margin:30px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap:20px; z-index:0;}
.kategori-card {background: white; cursor: pointer; border: 1px solid var(--border-color); overflow: hidden; transition: 0.3s ease; border-radius: 5px;}
.kategori-card:hover {transition: all .2s ease-out; /*border:1px solid var(--turuncu); will-change: transform; transform: translateY(-10px); */box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125) !important;}
.kategori-content {padding:10px 5% 30px; min-height:10px; display: flex; flex-direction: column;}
.kategori-content h3 {font-size:18px; margin-bottom: 10px; font-weight:500; height:48px;}
.kategori-card:hover .kategori-content h3{color:var(--turuncu)}
.kategori-image {position: relative; width:80%; height:240px; margin:5%; padding:5%; overflow: hidden;}
.kategori-image img {position: absolute; top: 0; left: 0; width:100%; height:100%; object-fit: cover; transition:transform 0.4s ease;}
.kategori-card:hover .kategori-image img {transform:scale(1.2);}


/*urunler*/
.urunler {width:80%; margin:30px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:20px; z-index:0;}
.urun-card {background: white; cursor: pointer; border: 1px solid var(--border-color); overflow: hidden; transition: 0.3s ease; border-radius: 5px;}
.urun-card:hover {transition: all .2s ease-out; box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125) !important;}
.urun-badge {background: #ffffff; color: #999; padding:6px 16px; border-radius:20px; font-size:10px; font-weight:300; letter-spacing:1px; display: inline-block; margin-top: -15px; margin-left: 15px; border: 1px solid #ddd;}
.urun-content {padding:10px 20px 30px; min-height:10px; display: flex; flex-direction: column;}
.urun-content h3 {font-size:18px; margin-bottom: 10px; font-weight:500; height:48px;}
.urun-content h3 a{color: var(--dark);}
.urun-content h3 a:Hover{text-decoration: underline;}
.urun-card:hover .urun-detail-btn {background-color:var(--turuncu); color: #fff; border: 1px solid var(--turuncu);}
.urun-image {position: relative; width:80%; height:180px; margin:5%; padding:5%; overflow: hidden;}
.urun-image img {position: absolute; top: 0; left: 0; width:100%; height:100%; object-fit: cover; padding:0;  transition:transform .4s ease;}
.urun-card:hover .urun-image img {transform:scale(1.2);}



/*blogdetail*/
.blogdetail {width:50%; margin:30px auto; padding:2%; background: #fff; border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden;}
.blogdetail figure {width: 100%; overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 30px;}
.blogdetail figure img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.blogdetail-title {font-size:1.9em; font-weight:600; margin-bottom: 10px; color:var(--dark);}
.blogdetail-meta {font-size:.9em; color: #777; margin-bottom: 20px;}
.blogdetail-detail {margin:50px 0px; text-align: justify; font-size:1.1rem;}
.blogdetail-detail a {text-decoration: underline; font-weight: 600;}
.blogdetail-etiketler {margin-top:50px; display: flex; flex-wrap: wrap; gap: 10px;}
.blogdetail-etiketler span {background: #eee; padding: 6px 12px; border-radius: 20px; font-size: 0.76em; color: #555;}
.blogdetail-paylasim {margin-top: 20px; border-top: 1px solid #ddd; padding-top: 15px; display: flex; justify-content:center; align-items: center; flex-wrap: wrap; gap: 10px;}
.blogdetail-paylasim button {background: #007bff; color: white; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; transition: 0.3s;}
.blogdetail-paylasim button:hover {background: #0056b3;}

/*Info*/
.info{width:80%; margin:30px auto; display:flex; flex-direction:column; font-family: "Courgette", cursive; font-weight: 400; font-style: normal;}
.info-card:nth-child(1){width:100%; display:flex; justify-content:space-between; margin-bottom: 30px;}
.info-card:nth-child(1) article{width:40%; order:2; padding:5%; color:var(--turuncu);}
.info-card:nth-child(1) article p{color:var(--dark);}
.info-card:nth-child(1) figure{width:50%; order:1;}
.info-card:nth-child(1) figure img{width: 100%; height: 100%; object-fit: cover; display: block;}
.info-card:nth-child(2){width:100%;display:flex; justify-content:space-between;}
.info-card:nth-child(2) article{width:40%; order:1; padding:5%; color:var(--turuncu);}
.info-card:nth-child(2) article p{color:var(--dark);}
.info-card:nth-child(2) figure{width:50%; order:2;}
.info-card:nth-child(2) figure img{width: 100%; height: 100%; object-fit: cover; display: block;}


.iletisim{max-width:1200px; margin:80px auto; padding:40px; font-family:Arial, Helvetica, sans-serif; color:#1f2933;}
.iletisim h2{font-size:32px; margin-bottom:30px;}
.iletisim-ust{display:flex; gap:40px; margin-bottom:60px;}
.iletisim-form{width:50%;}
.iletisim-form input,.iletisim-form textarea{width:96%; padding:14px 2%;margin-bottom:15px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;}
.iletisim-form textarea{resize:none;height:140px;}
.iletisim-form button{padding:14px 30px;border:none;border-radius:30px;background:#22c55e;color:#fff;font-size:15px;cursor:pointer;}
.iletisim-form button:hover{background:#16a34a;}
.iletisim-harita{width:50%;}
.iletisim-harita iframe{width:100%; height:100%; min-height:350px; border-radius:16px; border:0;}
.iletisim-alt{display:flex; justify-content:space-between; gap:30px;}
.iletisim-kutu{width:30%; text-align:center; padding:25px 15px; border-radius:16px; background:#f8fafc;}
.iletisim-kutu h4{margin-bottom:10px; font-size:16px;}
.iletisim-kutu a{color:#0f172a; text-decoration:none;font-size:14px;}
.iletisim-kutu a:hover{text-decoration:underline;}

.iletisim-sosyalmedya{margin-top:60px; display:flex;justify-content:center;gap:16px;}
.iletisim-sosyalmedya .sm{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease;}
.iletisim-sosyalmedya .sm:hover{transform:translateY(-4px); box-shadow:0 10px 25px rgba(0,0,0,.18);}
.instagram{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af);}
.facebook{background:#1877f2;}
.whatsapp{background:#25d366;}
.linkedin{background:#0a66c2;}



.detay {max-width: 1100px; margin: 0 auto; padding: 30px; font-family: Arial, Helvetica, sans-serif;}
.detay-icerik {display: flex; gap: 30px; align-items: flex-start;}
.detay-resim {flex: 1;}
.detay-resim img {width: 100%; height: auto; border-radius: 8px;}
.detay-yazi {flex: 1.2;}
.detay-yazi h1 {margin-top: 0; font-size: 28px; margin-bottom: 15px;}
.detay-yazi p {font-size: 16px; line-height: 1.7; color: #333;}


@media (max-width: 768px) {
.detay-icerik {
flex-direction: column;
}
}


.kurumsal{max-width:1200px; margin:80px auto; padding:40px; font-family:Arial, Helvetica, sans-serif; color:#1f2933;}
.kurumsal-ust{display:flex; gap:40px; align-items:center; margin-bottom:80px;}
.kurumsal-text{width:50%;}
.kurumsal-text h2{font-size:36px; margin-bottom:20px;}
.kurumsal-text p{font-size:16px; line-height:1.8; color:#475569;}
.kurumsal-img{width:50%;display: flex; align-self:flex-start; }
.kurumsal-img img{width:100%; border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,0.12);}
.kurumsal-sayac{display:flex; justify-content:space-between; gap:30px;}
.sayac-item{width:33.33%; text-align:center;}
.progress-circle{width:140px; height:140px; margin:0 auto 20px; border-radius:50%; background:conic-gradient(#22c55e 0deg, #e5e7eb 0deg);  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:bold; color:#14532d;}
.sayac-item h4{font-size:18px; margin-top:10px; color:#0f172a;}





/* FOOTER */
footer {width:80%; background-color: var(--beyaz); margin-top:50px; padding:40px 10%; border-top: 1px solid #ebebeb; text-align: center;}
.footer-links {display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 20px;}
.footer-links a {text-decoration: none; color: var(--dark); font-size:.86rem; transition: color 0.2s; white-space: nowrap;}
.footer-links a:hover {color: var(--dark);}
.footer-keywords h4 {font-size: 14px; font-weight: 600; color: var(--dark); margin: 0 0 10px;}
.keywords-list {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px;}
.keywords-list a {text-decoration: none; color: var(--dark-text); font-size:.76rem; padding: 5px 10px; border: 1px solid #d1d1d1; border-radius: 12px; transition: background-color 0.2s, color 0.2s;}
.keywords-list a:hover {background-color:#f9f9f9; color: var(--dark);}
.footer-legal {font-size:13px; color: var(--dark-text);}

.keywords-hidden {display:flex; flex-wrap: wrap; justify-content: center; gap:3px; font-size: 8px; color:white;}
.keywords-hidden a{color:white;}



@media (max-width: 768px) {
.info{width:96%; margin:30px auto;}
.info-card:nth-child(1),.info-card:nth-child(2){flex-direction: column;}
.info-card:nth-child(1) article{order:1; width:90%;}
.info-card:nth-child(1) figure{order:2; width:100%;}
.info-card:nth-child(2) article{order:1; width:90%;}
.info-card:nth-child(2) figure{order:2; width:100%;}

.top{width:90%; min-height:70px; padding:8px 5%; display: flex; justify-content: space-between; align-items: center; background-color: #fff;}
.top figure{width:auto; height:30px;}
.top figure img{width: 100%; height: 100%; object-fit: cover; display: block;}
#hamburger{width:32px; height:32px; display: flex; justify-content: center; align-items: center; z-index:999999;}

.header.active {transform: translateX(0);}
.header #closeSidebar{display: flex; width:auto; height:auto; background-color: var(--turuncu); padding:6px 18px; color:white; order:4; border-radius:5px;}


.header {width:80%; height:calc(100vh - 0px); padding:0 0%; border-bottom:0px; z-index:9;
transform: translateX(-100%); height:calc(100vh - 0px); border-right:5px solid #d50000; background-color: rgb(0,0,0,1); 
display: flex; justify-content:center; flex-direction: column; transition: transform 0.35s ease; background-color:rgba(0,0,0,0.8);
align-items: center; position:fixed; left: 0; top:0;}

.header ul:nth-child(1){width:auto; height:auto; line-height: 40px; display: flex; justify-content:inherit; flex:0; order:3;}
.header ul:nth-child(1) li{}
.header ul:nth-child(1) li a{background-color:rgba(0,0,0,0); color:var(--beyaz); margin-right: 8px; padding:3px 8px; transition: 0.3s ease; border-radius:5px;}
.header ul:nth-child(2){width:auto; height:auto;  display:flex; flex-direction: column; align-items: center; justify-content:inherit; flex:0; order:1;}
.header ul:nth-child(2) li{width:auto; height:auto; display: flex; align-items: center;}
.header ul:nth-child(2) li img{width:auto; height:80px;}
.header ul:nth-child(2) li a{color:white; margin:0 16px; line-height: 40px; position: relative; font-size:0.86rem; font-weight:500;}
.header ul:nth-child(2) li a:Hover{color:var(--sari);}
.header ul:nth-child(2) li a::before{display:none;}
.header ul:nth-child(2) li:nth-child(1){order:1;}
.header ul:nth-child(2) li:nth-child(2){order:2;}
.header ul:nth-child(2) li:nth-child(3){order:3;}
.header ul:nth-child(2) li:nth-child(4){order:4;}
.header ul:nth-child(2) li:nth-child(5){order:5;}
.header ul:nth-child(3){width:auto; height:auto; margin:16px 0; line-height:32px; display:flex; justify-content: inherit; flex:0; order:2;}
.header ul:nth-child(3) li a{padding:6px 9px; margin:0 3px; cursor: pointer; background-color:var(--kirmizi); color: white; border-radius:5px;}



footer {width:94%; padding-left:3%; padding-right:3%; }
.blogdetail {width:80%;}

.kurumsal-ust{flex-direction:column;}
.kurumsal-text,.kurumsal-img{width:100%;}
.kurumsal-sayac{flex-direction:column;}
.sayac-item{width:100%;}

.iletisim-ust,.iletisim-alt{flex-direction:column;}
.iletisim-form,.iletisim-harita,.iletisim-kutu{width:100%;}

.kategoriler{width:95%; grid-template-columns:1fr;}
.kategori-image{height:200px;}
.urunler{width:95%; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.urun-image{height:160px;}
.urun-image img{height:160px;}


.swiper {height:240px; margin-top: -0px!important;}
.sliderSwiper {padding-bottom:0px;}
.slider-card img {object-fit: cover;}

}/*And*/