.subtitle { display: flex; align-items: center; } .subtitle .icon { margin-right: 10px; color: #e1306c; /* İkonun rengini buradan değiştirebilirsiniz */ } .vertical-line { border-left: 1px solid #ccc; /* Çizginin rengi ve kalınlığı */ margin: 10px; /* Çizginin butonlardan uzaklığı */ } .navLink { position: relative; transition: .2s; display: flex; align-items: center; } .iconm-instagram { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #E1306C; margin-right: 12px; font-size: 18px; } .iconm-tiktok { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #0893ca; margin-right: 12px; font-size: 18px; } .iconm-youtube { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #ff0000; margin-right: 12px; font-size: 18px; } .iconm-facebook { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #1873eb; margin-right: 12px; font-size: 18px; } .iconm-twitter { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #1da1f2; margin-right: 12px; font-size: 18px; } .iconm-spotify { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #1ed760; margin-right: 12px; font-size: 18px; } .iconm-telegram { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #24a2df; margin-right: 12px; font-size: 18px; } .iconm-google { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #4285f4; margin-right: 12px; font-size: 18px; } .iconm-pinterest { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #ff001d; margin-right: 12px; font-size: 18px; } .iconm-twitch { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #9147ff; margin-right: 12px; font-size: 18px; } .iconm-kwai { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #f97637; margin-right: 12px; font-size: 18px; } .iconm-tumblr { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #36465D; margin-right: 12px; font-size: 18px; } .iconm-threads { width: 35px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: #222222; margin-right: 12px; font-size: 18px; } .integration-list li .single-integration { -webkit-box-shadow: rgba(13, 21, 55, .06) 0 5px 50px; box-shadow: rgba(13, 21, 55, .06) 0 5px 50px; display: block; margin: auto; text-align: center; padding: 20px; border-radius: 6px; -webkit-transition: all .3s ease; transition: all .3s ease; } .product-social { border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 26px 12px; height: 150px; transition: transform 0.3s ease; } .product-social:hover { transform: translateY(-10px); } .product-social i { font-size: 45px; color: #fff; } .product-social span { display: grid; gap: 24px; color: #fff; font-weight: 800; line-height: 1.2; text-align: center; margin-top: 16px; } .feature-tab-list-2 .nav-link { font-size: 24px; color: #a69595; /* İkonların varsayılan rengi */ padding: 10px 15px; transition: color 0.3s ease, background-color 0.3s ease; } .feature-tab-list-2 .nav-link.active { color: #fff; background-color: #3077e1; } .feature-tab-list-2 .nav-link:hover { color: #ffffff; /* Hover durumunda ikonların rengi */ } .feature-tab-list-2 .nav-item { margin: 0 5px; } .pack { background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; max-width: 300px; margin: 20px auto; } .pack:hover { transform: translateY(-10px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .packetDiv { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 20px; background: #e1306c; /* Gradient arka plan rengi */ border-radius: 8px; color: #fff; } .packetDiv .text { font-size: 18px; font-weight: bold; } .packetDiv .text span { display: block; font-size: 14px; } .packetDiv .icon i { font-size: 36px; } .detailPacket ul { list-style: none; padding: 0; margin: 0 0 20px 0; text-align: left; } .detailPacket ul li { font-size: 17px; margin-bottom: 10px; display: flex; align-items: center; } .detailPacket ul li i { color: #e1306c; margin-right: 10px; } .packAction .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .packAction .price { font-size: 26px; font-weight: bold; color: #2acf9b; display: flex; align-items: center; } .packAction .price .icon i { margin-right: 5px; } .packAction .addFav { display: flex; align-items: center; } .packAction .favAdd { background: none; border: none; color: #2acf9b; cursor: pointer; font-size: 24px; } .packAction .favAdd:hover { color: #c1275b; } .sepetBtn { display: inline-block; padding: 10px 20px; background-color: #e1306c; color: #fff; border-radius: 4px; text-decoration: none; transition: background-color 0.3s ease; } .sepetBtn:hover { background-color: #c1275b; } hr.custom-hr { border: 0; height: 1px; background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0)); margin: 20px 0; } .oldPrice { font-size: 12px; color: var(--soft-text-color); text-decoration: line-through; font-weight: 400; margin-left: 0.5rem !important; } .ozelButton { display: flex; justify-content: center; gap: 3px; margin: -34px auto 0; max-width: fit-content; padding: 2px 11px; color: #fff; font-weight: 500; text-transform: uppercase; font-size: 13px; background: #e1306c; border: 2px solid; border-radius: 20px; z-index: 2; position: relative; } .ozelButtonTikTok { display: flex; justify-content: center; gap: 3px; margin: -34px auto 0; max-width: fit-content; padding: 2px 11px; color: #fff; font-weight: 500; text-transform: uppercase; font-size: 13px; background: #0d121f; border: 2px solid; border-radius: 20px; z-index: 2; position: relative; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; } .modal-content { background-color: #d10b0b; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; /* Maksimum genişlik ayarı */ } .close { color: #ffff; position: absolute; top: -20px; right: -20px; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover, .close:focus { color: white; text-decoration: none; cursor: pointer; } .siparis-sorgu { margin-top: 20px; margin-bottom: 20px; border-radius: 10px; border: 1px solid #c4c9db; background-color: #fff; padding: 8px; display: flex; align-items: center; transition: .3s; } .siparis-sorgu input { color: #595b70; font-size: 16px; font-weight: 500; width: 100%; background-color: transparent; height: 50px; border: 0; box-shadow: none; } .modalp { font-weight: 400; font-size: 16px; line-height: 18px; color: #ffff; margin-top: 8px; margin-bottom: 30px; } .alert { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #f44336; color: white; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; right: 30px; bottom: 30px; font-size: 17px; } .alert.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } .success-alert { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #22e90c77; color: white; text-align: center; border-radius: 3px; padding: 26px; position: fixed; z-index: 1; right: 30px; bottom: 30px; font-size: 17px; } .success-alert.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } @-webkit-keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @-webkit-keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} } @keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} } .accordion { display: flex; flex-wrap: wrap; } .accordion-item { flex: 1 1 45%; /* Her bir öğe genişliğini %45 yapar, böylece iki öğe yan yana sığar */ margin: 10px; /* Öğeler arasında boşluk bırakır */ } .whatsapp-button { position: fixed; top: 60%; transform: translateY(-50%); left: 30px; z-index: 9999; padding: 10px; background-color: #25D366; color: #fff; font-size: 14px; border-radius: 8px; } .phone-button { position: fixed; top: 50%; transform: translateY(-50%); left: 30px; z-index: 9999; padding: 10px; background-color: #d22a1e; color: #fff; font-size: 14px; border-radius: 8px; } .whatsapp-text { overflow: hidden; display: inline-block; vertical-align: bottom; white-space: nowrap; } .phone-text { overflow: hidden; display: inline-block; vertical-align: bottom; white-space: nowrap; } @keyframes typing { 0% { width: 0; } 100% { width: 100px; } }.modalVideo { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modalVideo-content { background-color: #fefefe; margin: 10% auto; padding: 0; border: 1px solid #888; width: 60%; max-width: 800px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; } .close-video { color: #cb1919d9; position: absolute; top: 10px; right: 10px; font-size: 28px; font-weight: bold; width: 30px; height: 30px; text-align: center; line-height: 30px; cursor: pointer; z-index: 2; pointer-events: auto; } .close-video:hover, .close-video:focus { text-decoration: none; } video { width: 100%; height: auto; display: block; z-index: 1; pointer-events: none; } .modalVideo-content video { pointer-events: auto; }