:root {
    --bg: #f8f7fa;
    --menutxtcl: 63, 70, 128;
    --menutxtweight: 600;
    --intlinear: 90, 99, 129;
    --txtall: 59, 61, 79;
    --cl1: 65, 76, 139;
    --pckdf: var(--cl1);
    --whydf: var(--cl1);
    --lbds: 255, 255, 255;
    --lsdb: 56, 58, 70;
    --text: 85, 85, 85;
    --fixedtel: #9b536b;
}
body.dark {
    --bg: #26272d;
    --menutxtcl: 226, 226, 228;
    --intlinear: 45, 45, 58;
    --txtall: 226, 226, 228;
    --cl1: 192, 128, 223;
    --lbds: 56, 58, 70;
    --lsdb: 255, 255, 255;
    --pckdf: var(--cl1);
    --text: 226, 226, 228;
}

.paymentDetail { background: #fffde6; border: 1px solid #ffcc00; color: #664d00; padding: 15px; border-radius: 6px; font-weight: 500; font-size: 14.5px; box-shadow: 0 1px 5px rgba(0,0,0,0.05); } .post-body { background-color: #fffbea; /* açık sarı */ border-left: 5px solid #ffc107; /* sarı uyarı çizgisi */ padding: 16px 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); color: #4a4a4a; font-family: "Segoe UI", sans-serif; font-size: 15px; line-height: 1.7; } .post-body strong { display: block; margin-bottom: 8px; color: #333; font-weight: 600; } .post-body ol { padding-left: 18px; margin: 0; } .post-body ol li { margin-bottom: 6px; } .butto-fast { background-color: #00c96b; color: white; padding: 16px 28px; font-size: 18px; font-weight: 700; border: none; border-radius: 12px; width: 100%; max-width: 360px; margin: 20px auto; display: block; text-align: center; box-shadow: 0 0 0 0 rgba(0, 201, 107, 0.7); animation: pulseBtn 2s infinite; transition: transform 0.2s ease; } @keyframes pulseBtn { 0% { box-shadow: 0 0 0 0 rgba(0, 201, 107, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(0, 201, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 201, 107, 0); } } @media (max-width: 480px) { .butto-fast { font-size: 19px; padding: 18px 20px; border-radius: 14px; } } .navTogbtn { position: relative; } .navTogbtn::after { content: "Меню"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #061335; color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 4px; margin-top: 6px; white-space: nowrap; opacity: 1; animation: fadeTooltip 5s forwards; z-index: 99; } @keyframes fadeTooltip { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } } .navTogbtn { animation: navWiggle 0.6s ease-in-out 0.5s 1 both; } @keyframes navWiggle { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-1px); } 100% { transform: translateX(0); } } @media (max-width: 768px) { .nfootall { position: relative; } .nfootall::before { content: "❤️ ☺️ ❤️"; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: bold; pointer-events: none; user-select: none; z-index: 10; opacity: 1; animation: slideSmooth 7s ease-out forwards, pulseHeart 1.6s ease-in-out 3 forwards, fadeAwaySoft 1s ease-in 12s forwards; animation-delay: 0s, 7s, 12s; } /* 1. Sağa 130px kayar */ @keyframes slideSmooth { 0% { transform: translateX(-50%) translateX(0); opacity: 1; } 100% { transform: translateX(-50%) translateX(130px); opacity: 1; } } /* 2. 3 kez kalp atışı */ @keyframes pulseHeart { 0%, 100% { transform: translateX(-50%) translateX(130px) scale(1); } 50% { transform: translateX(-50%) translateX(130px) scale(1.15); } } /* 3. Nazikçe kaybolur */ @keyframes fadeAwaySoft { 0% { opacity: 1; } 100% { opacity: 0; } } } .serviceList .box { width: 70px; height: 70px; background-color: #fff; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; overflow: hidden; margin: 0 auto; } .serviceList .box i { font-size: 28px; line-height: 1; color: #2f2f2f; } .serviceList .item { text-align: center; width: 90px; margin: 10px auto; } .serviceList .box { position: relative; width: 80px; height: 80px; border-radius: 50%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 28px; z-index: 1; } .serviceList .box::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient( 120deg, rgba(64, 29, 186, 0) 0%, rgba(64, 29, 186, 0.6) 50%, rgba(64, 29, 186, 0) 100% ); transform: skewX(-25deg); animation: shineMove 3s linear infinite; pointer-events: none; z-index: 2; } @keyframes shineMove { 0% { left: -75%; } 100% { left: 125%; } } .chxarea input[type="checkbox"] { position: absolute; width: 30px; height: 30px; opacity: 0; cursor: pointer; margin: 0; padding: 0; z-index: 10; } .chxarea label { padding-left: 40px; cursor: pointer; display: inline-block; position: relative; } .chxarea label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 2px solid #401DBA; border-radius: 4px; background: #fff; box-sizing: border-box; pointer-events: none; } .chxarea input[type="checkbox"]:checked + label::before { background-color: #401DBA; border-color: #401DBA; } .chxarea input[type="checkbox"]:checked + label::after { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-50%) rotate(45deg); pointer-events: none; } .chxarea input[type="checkbox"]:not(:checked) + label::before { animation: pulseBefore 2s ease-in-out infinite; } @keyframes pulseBefore { 0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(64, 29, 186, 0); } 50% { transform: translateY(-50%) scale(1.1); box-shadow: 0 0 8px 4px rgba(64, 29, 186, 0.3); } } .selectPayment { background: linear-gradient(145deg, #f0f0f3, #cacbcc); border-radius: 12px; box-shadow: 6px 6px 10px #bebfc3, -6px -6px 10px #ffffff; transition: all 0.3s ease; cursor: pointer; padding: 15px 25px; display: flex; align-items: center; gap: 15px; font-weight: 700; font-size: 1.1rem; } .selectPayment:hover { box-shadow: 8px 8px 15px #b1b2b6, -8px -8px 15px #ffffff; transform: translateY(-4px); background: linear-gradient(145deg, #e1e2e6, #c0c2c6); } .selectPayment i { font-size: 1.8rem; color: #616770; transition: color 0.3s ease; } .selectPayment:hover i { color: #2a7a4a; } @keyframes iconPulse { 0%, 100% { transform: scale(1); color: #2a7a4a; } 50% { transform: scale(1.1); color: #4dbd6a; } } .selectPayment.selected i { animation: iconPulse 1.5s infinite; } .selectPayment { box-shadow: 0 0 10px rgba(42, 122, 74, 0.15); transition: box-shadow 0.3s ease; } .selectPayment:hover, .selectPayment.selected { box-shadow: 0 0 20px rgba(42, 122, 74, 0.5); } .payment-title { position: relative; font-weight: 700; font-size: 1.2rem; background: linear-gradient(90deg, #2a7a4a, #6fdc8c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 18px; padding: 8px 20px; border: 2px solid #6fdc8c; border-radius: 12px; box-shadow: 0 0 15px rgba(111, 220, 140, 0.8); /* Parıltı biraz daha parlak */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; user-select: none; text-align: center; overflow: hidden; /* Taşma önlemek için */ } /* Parıltı için animasyonlu pseudo-element */ .payment-title::before { content: ""; position: absolute; top: -2px; left: -60%; /* Parıltı biraz daha geniş alanda başlıyor */ width: 60%; /* Genişletildi */ height: calc(100% + 4px); background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, /* Opaklık artırıldı */ rgba(255, 255, 255, 0) 100% ); transform: skewX(-25deg); animation: shineMove 2.5s linear infinite; /* Animasyon biraz hızlandı */ pointer-events: none; border-radius: 12px; z-index: 2; } @keyframes shineMove { 0% { left: -60%; } 100% { left: 160%; } } .stripepay-button { background-color: #28a745 !important; /* Net yeşil zemin */ background-image: linear-gradient(90deg, #28a745, #218838) !important; /* Gradient zemin */ color: #ffffff !important; /* Yazı beyaz */ font-weight: bold; font-size: 16px; padding: 14px 28px; border: none; border-radius: 8px; box-shadow: 0 0 12px rgba(40, 167, 69, 0.6); cursor: pointer; transition: all 0.3s ease-in-out; text-shadow: 0 0 3px rgba(0, 0, 0, 0.4); /* Yazının görünürlüğünü artırır */ display: inline-block; position: relative; z-index: 10; } .font-weight-bold { font-weight: 700; font-size: 20px; color: #2e2e2e; text-align: center; margin-bottom: 14px; position: relative; display: inline-block; } .font-weight-bold::after { content: ""; display: block; width: 60%; height: 3px; background: linear-gradient(90deg, #2ecc71, #27ae60); border-radius: 2px; margin: 8px auto 0; animation: underlinePulse 2.5s ease-in-out infinite; } .revolut-button { display: inline-block; padding: 14px 18px; background: linear-gradient(135deg, #0075eb, #5e17eb); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 117, 235, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; text-align: center; white-space: normal; /* ❗️Bunu nowrap yerine normal yapıyoruz */ max-width: 90vw; /* ❗️Mobilde ekran dışına taşmasın */ line-height: 1.4; } .revolut-button:hover { transform: scale(1.04); box-shadow: 0 6px 16px rgba(0, 117, 235, 0.4); } .payment-method { text-align: center; margin-top: 24px; padding: 0 10px; /* Mobil kenar tamponu */ } #_selectbank {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  color: #333;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23999' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  transition: all 0.25s ease;
  cursor: pointer; /* 1. Tıklanabilirlik hissi */
}

#_selectbank:hover {
  border-color: #5e17eb; /* 2. Mor vurgu */
  box-shadow: 0 0 10px rgba(94, 23, 235, 0.1); /* 3. Daha canlı gölge */
  background-color: #fcfaff;
}

#_selectbank:focus {
  outline: none;
  border-color: #0075eb;
  box-shadow: 0 0 12px rgba(0, 117, 235, 0.2);
  background-color: #f9faff;
}