@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
body {font-family: "Nunito", sans-serif; font-style: normal; padding-top:70px;}
a { text-decoration: none !important; color: #383e42; transition-duration: 0.4s; }
a:link{text-decoration:none;}
.br{border:1px solid red;}
.kirmizi { color: #ff0000;}
.mavi { color: #00afea;}
.ustaimg { position: relative; text-align: center;}
.ustaimg a { display:block;}
.ustaimg img {display: inline-block; max-height:280px; max-width:100%;}
/*liste*/
.itemm {
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.itemm:hover {transform: scale(0.97); box-shadow: 0 0 15px 5px #6dadb2;}
.product-title {
height: 56px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 1.2;
margin: 10px 0;
border-bottom: none;
}
.katalog-title {
height: 40px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 1.2;
margin: 10px 0;
border-bottom: none;
}
/*detay sayfası*/
.detayyildiz{color:#fba900; font-size:20px;}
.br{border:1px solid red;}
.wrapper {
border: 1px solid #e2e2e2;
text-align: center;
padding: 3px 0;
height: auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.wrappers { position: sticky; top: 132px; margin-bottom: 44px;}
.product-basket {display: flex; flex-direction: column; height: 100%; width: 100%; margin-bottom: auto;}
.proDetail{font-weight: 400; color: #202020; padding: 0; border: 0; font-size: 100%; position: relative; float:left; margin: 0 20px;}
/**/
/* iletisim css */
.harita-wrap {margin-top:-19px; width: 100%; overflow: hidden;}
.harita-icerik {width: 104%; margin-left: -2%;}
/* iletisim css */
.iletisim-header {
position: relative;
width: 100%;
height: 350px;  
overflow: hidden;
margin-top: -70px;
}
.iletisim-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Mobil (max 768px) için yüksekliği yarıya düşür */
@media (max-width: 768px) {.iletisim-header { height: 175px; }}
/*yandan cıkan icon*/
.right-social-fixed { position: fixed; bottom: 11px; right: -8px; z-index: 100;}
.right-social-fixed ul {list-style: none; padding: 0; margin: 0;}
.right-social-fixed ul li {
display: block;
margin-bottom: 5px;
color: #fff;
transition: 0.3s;
transform: translateX(calc(100% - 57px));
}
.right-social-fixed ul li a {
padding: 5px 10px;
background-color: #111e72;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
color: inherit;
display: flex;
align-items: center;
transition: transform 0.3s;
}
/* WhatsApp */
.right-social-fixed ul li.wp a { background-color: #069d16;}
.wp img {margin-left: -4px; width: 34px; height: 34px; animation: flash 1s infinite;}
/* Telefon */
.right-social-fixed ul li.tel a { background-color: #f95732;}
.tel img { margin-left: -4px; width: 34px; height: 34px; animation: flash 1s infinite;}
/* Flash (yanıp sönme) animasyonu */
@keyframes flash { 0%, 100% { opacity: 1; }  50% { opacity: 0; } }
/* Hover ile sabitlenme */
.right-social-fixed ul li:hover { transform: translateX(0%);}
/*eart*/
.eart img {width: 36px; height: 36px; object-fit: cover; border-radius: 10px; margin-top: -1px;}
/*blog baslık*/
.kampanya-title-wrapper { position: relative; text-align: center; margin-bottom: 4px;}
/* Yazı: Buton görünümünde */
.kampanya-title-wrapper h2 {
display: inline-block;
position: relative;
padding: 6px 30px;
font-size: 20px;
font-weight: bold;
border-radius: 30px;
color: #fff;
background: #0e87f0;
box-shadow: 0 7px 3px rgba(0,0,0,0.30);
z-index: 1;
}
/* Ortadaki ince çizgi */
.kampanya-title-wrapper::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: #ccc;
z-index: 0;
}
/*footer*/
.dark-section {background-color: #000; color: #e8f6ff; padding: 50px 0;}
.dark-box {border: 1px solid rgba(255,255,255,0.1); padding: 20px; border-radius: 10px; height: 100%;}
.dark-box b {color: #dff5ff;}
.service-box b {color: #eaf7ff; margin-bottom: 10px; font-size:18px;}
.service-box .move-link {display: flex; align-items: center; gap: 8px; margin-bottom: 10px;}
.move-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #cfeeff;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: transform 0.35s ease, color 0.35s ease;}
.move-link .arrow {font-size: 18px; line-height: 1; color: #bfe9ff;}
/* Hover efekti */
.move-link:hover {color: #7fd9ff; transform: translateX(10px); text-shadow: 0 0 8px rgba(127,217,255,0.6);}
.contact-box span {display: block; margin-bottom: 4px; color: #e6f4ff;}
.contact-title {font-weight: 600; margin-top: 10px; color: #bfe9ff;}
.contact-name {font-weight: 500;}
.contact-phone {font-size: 14px; opacity: 0.85;}
.worktime-box span {display: block; margin-bottom: 4px;}
.workday-title {margin-top: 10px; font-weight: 600; color: #bfe9ff;}
.workday-time {font-size: 14px; color: #e6f4ff;}
.workday-closed {margin-top: 10px; font-size: 14px; font-weight: 600; color: #ff6b6b;}
.contact-box .contact-phone a { display: inline-flex; align-items: center; gap: 6px; color: #bfe9ff; transition:  color 0.3s ease, transform 0.35s ease, text-shadow 0.35s ease;}
.contact-box .contact-phone a:hover {color: #7fd9ff; transform: translateX(10px); text-shadow: 0 0 8px rgba(127,217,255,0.6);}
.contact-box .contact-phone i {color: #bfe9ff;}

.th-social {margin-top: 2px;}
.th-social {margin-top: 2px; display: flex; flex-wrap: wrap; gap: 12px;}
.th-social > div { flex-basis: 100%;}
.th-social a {font-size: 22px; margin-right: 10px; color: inherit;  transition: transform 0.3s ease, text-shadow 0.3s ease;}
.th-social a i { text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);  transition: text-shadow 0.3s ease;}
.th-social a.facebook { color: #1877F2; }
.th-social a.whatsapp { color: #25D366;}
.th-social a.instagram { color: #ff78c4;}
.th-social a.map { color: #e9460a;}
.th-social a.telefon {font-size: 16px; color: #000;}
.th-social a:hover i {transform: scale(1.4) !important; transition: transform 0.3s ease !important;}
.th-sociall a:hover i { transform: scale(1.4) !important; transition: transform 0.3s ease !important;}
/*blog modal Modal kutusu (içeriği) */
.modal-content {
background-color: #f9f9f9; /* açık zemin */
border-radius: 12px;
border: 4px solid #ffffbf; /* açık gri çerçeve */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
/* Modal başlık (üst bar) */
.modal-header {
background-color: #307fb0;
color: #ffffff;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom: 1px solid #444;
}
/* Modal başlık yazısı */
.modal-title { font-weight: 600; font-size: 1.25rem; }
/* Kapat (X) butonu rengi ters olsun */
.btn-close { filter: invert(1); }
/* Modal içeriği */
.modal-body { color: #333; font-size: 17px; padding-top: 8px; }
/* Modal resmi */
#modalResim {
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
/* Açıklama paragraf boşlukları */
#modalAciklama p, #modalAciklama div {margin-bottom: 3px;}
/*modal mesaj*/
.custom-modal-success {
border-radius: 20px;
border: none;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
.checkmark-circle {
width: 80px;
height: 80px;
position: relative;
display: inline-block;
vertical-align: top;
}
.checkmark-circle .background {
width: 80px;
height: 80px;
border-radius: 50%;
background: #4BB543;
position: absolute;
top: 0;
left: 0;
}
.checkmark { border-radius: 5px;}
.checkmark.draw:after {
animation-duration: 800ms;
animation-timing-function: ease;
animation-name: checkmark;
transform: scaleX(-1) rotate(135deg);
animation-fill-mode: forwards;
content: '';
height: 40px;
left: 31px;
position: absolute;
top: 13px;
width: 20px;
border-right: 5px solid #fff;
border-top: 5px solid #fff;
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 20px;
    opacity: 1;
  }
  40% {
    height: 40px;
    width: 20px;
    opacity: 1;
  }
  100% {
    height: 40px;
    width: 20px;
    opacity: 1;
  }
}
/*sıkca sorulan sorular*/
.faq-section { padding: 40px 15px; font-family: "Poppins", sans-serif; font-size: 14px;}
.faq-item { margin-bottom: 10px;}
.faq-button {
width: 100%;
padding: 14px 45px 14px 15px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
text-align: left;
cursor: pointer;
font-size: 14px;
color: #333;
position: relative;
font-weight: 700;
font-size: 18px;
}
@media (max-width: 768px) {
    .faq-button {
        font-size: 16px;
    }
}
.faq-button:hover { background-color: #eaf2ff; border-color: #1a76d1;}
.faq-button.active {background-color: #eaf2ff; border-color: #1a76d1;}
.faq-button::after {
content: "▼";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #1a76d1;
transition: 0.3s;
}
.faq-button.active::after { transform: translateY(-50%) rotate(180deg);}
.faq-answer {
display: none;
padding: 15px;
background: #fff;
border-left: 3px solid #1a76d1;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 0 0 6px 6px;
}

/*video*/
.videobaslik{ color:#ff0040;font-weight: 600; }
.videotext{ color: #000; font-size: 16px; }
.profile-card-44 .card-img-block {
    float: left;
    margin: 10px;
    height: 180px;
    overflow: hidden;
}
.profile-card-44 .card-img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.profile-card-44:hover .card-img-block img { transform: scale(1.08);}
.profile-card-44 .card-body{ position:relative;}
.profile-card-44 .profile {
    border-radius: 50%;
    position: absolute;
    top: -62px;
    left: 50%;
    width:100px;
    border: 3px solid rgba(255, 255, 255, 1);
    margin-left: -50px;
}
.profile-card-44 .card-img-block{position:relative;}
.profile-card-44 .card-img-block > .info-box{
    position:absolute;
    background-color:rgba(0, 0, 0, 0.8);
    width:100%;
    height:100%;
    color:#fff;
    padding:0px;
    text-align:center;
    font-size:14px;
   -webkit-transition: 1s ease;
    transition: 1s ease;
    opacity:0;
}
.profile-card-44 .card-img-block:hover > .info-box{opacity:1;  -webkit-transition: all 1s ease; transition: all 1s ease;}
.profile-card-44 i:hover { background-color:rgba(0, 0, 0, 0.8); color:#fff;}
/*video*/
/*Effect 5*/
.effect5{position: relative;}
.effect5:before, .effect5:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
/*katalog*/
#book-wrapper {
position: relative;
display: flex;
justify-content: center;
z-index: 10;
}
#book {
position: relative;
z-index: 1;
}
.control-buttons {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 10px;
pointer-events: none;
z-index: 9999;
}
.control-buttons button {
pointer-events: all;
background: rgba(0,0,0,0.5);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
position: relative;
padding: 0;
}
/* Sol ok üçgen */
#prev::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
transform: translate(-50%, -50%) rotate(-45deg);
}
/* Sağ ok üçgen */
#next::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: translate(-50%, -50%) rotate(45deg);
}
.page img, .pf-page img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
@media (max-width: 768px) {
.control-buttons {
	top: 40%; /* Mobilde biraz aşağı */
}
}
/*detay aciklama*/
.urun-aciklama a {
    color: #0d6efd;
    text-decoration: underline  !important;
}

.urun-aciklama a:hover {
    text-decoration: none;
}