/* Sadece bu araca etki eden (Scoped) CSS kuralları */ #moduler-gun-hesaplayici-arac { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); border: 2px solid #3b82f6; border-radius: 16px; padding: 30px; max-width: 500px; margin: 25px auto; box-shadow: 0 15px 35px rgba(0,0,0,0.1); color: #1e293b; box-sizing: border-box; position: relative; overflow: hidden; } #moduler-gun-hesaplayici-arac::before { content: ''; position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background-color: rgba(59, 130, 246, 0.1); border-radius: 50%; z-index: 0; } #moduler-gun-hesaplayici-arac h3 { margin-top: 0; margin-bottom: 30px; color: #ff9800; /* Başlıkta turuncu vurgu */ text-align: center; font-size: 1.8rem; font-weight: 800; position: relative; z-index: 1; } #moduler-gun-hesaplayici-arac .input-group { display: flex; flex-direction: column; margin-bottom: 20px; position: relative; z-index: 1; } #moduler-gun-hesaplayici-arac label { margin-bottom: 10px; font-weight: 700; font-size: 1rem; color: #475569; } #moduler-gun-hesaplayici-arac select, #moduler-gun-hesaplayici-arac input { width: 100%; padding: 14px 18px; border: 2px solid #cbd5e1; border-radius: 10px; font-size: 1.1rem; background-color: #f8fafc; color: #1e293b; transition: all 0.3s ease; box-sizing: border-box; } #moduler-gun-hesaplayici-arac select:focus, #moduler-gun-hesaplayici-arac input:focus { outline: none; border-color: #ff9800; /* Odaklandığında turuncu */ background-color: #ffffff; box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.2); } #moduler-gun-hesaplayici-arac button { width: 100%; padding: 16px; background-color: #ff9800; /* İstenilen turuncu */ color: white; border: none; border-radius: 10px; font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin-top: 15px; position: relative; z-index: 1; box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3); } #moduler-gun-hesaplayici-arac button:hover { background-color: #e68a00; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 152, 0, 0.4); } #moduler-gun-hesaplayici-arac button:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(255, 152, 0, 0.3); } #moduler-gun-hesaplayici-arac #result-container { margin-top: 30px; padding: 25px; background-color: #fffbeb; border: 2px solid #ff9800; border-radius: 12px; text-align: center; display: none; /* Başlangıçta gizli */ animation: slideIn 0.5s ease; position: relative; z-index: 1; } #moduler-gun-hesaplayici-arac #result-text { font-size: 1.1rem; color: #1e293b; margin: 0 0 15px 0; line-height: 1.6; } #moduler-gun-hesaplayici-arac #result-day { font-size: 3.5rem; font-weight: 900; color: #ff9800; /* Sonuçta turuncu vurgu */ margin: 0; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(255, 152, 0, 0.2); } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Mobil Cihazlar İçin Dokunuşlar */ @media (max-width: 480px) { #moduler-gun-hesaplayici-arac { padding: 25px 20px; } #moduler-gun-hesaplayici-arac h3 { font-size: 1.5rem; } #moduler-gun-hesaplayici-arac #result-day { font-size: 2.8rem; } } Modüler Gün Hesaplayıcı Bugün günlerden ne? Pazartesi Salı Çarşamba Perşembe Cuma Cumartesi Pazar Kaç gün sonrası? Hesapla
Scott Ajans