:root {
    --bg: #f8f7fa;
    --menutxtcl: 111, 115, 145;
    --menutxtweight: 600;
    --intlinear: 90, 99, 129;
    --txtall: 79, 82, 107;
    --cl1: 127, 139, 216;
    --pckdf: var(--cl1);
    --whydf: var(--cl1);
    --lbds: 255, 255, 255;
    --lsdb: 56, 58, 70;
    --text: 85, 85, 85;
    --fixedtel: #d581b4;
}
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;
}

/* Menü öğeleri fontu */ .serviceList { font-family: 'Roboto', sans-serif; /* Roboto fontunu kullan */ font-weight: bold; /* Kalın font */ overflow: auto; justify-content: flex-start !important; padding-bottom: 10px; } .serviceList::-webkit-scrollbar-track { border-radius: 20px; background-color: #ededf3; } .serviceList::-webkit-scrollbar { height: 12px; background-color: #f5f5f5; } .serviceList::-webkit-scrollbar-thumb { border-radius: 20px; background-color: #d3d7de; } /* navlist başlangıcı */ .navlink { text-decoration: none; /* Link altı çizgilerini kaldırır */ color: #333; /* Koyu gri yazı rengi */ background-color: rgb(0 0 0 / 0%); /* Açık gri arka plan rengi */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Yazı tipi */ font-size: 14px; /* Daha küçük yazı boyutu */ padding: 8px 12px; /* Azaltılmış iç dolgu */ margin: 0; /* Öğeler arası boşluk yok */ border-radius: 4px; /* Daha az yuvarlak köşeler */ display: inline-block; /* Yan yana düzen */ transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Düzgün renk geçişi */ box-shadow: none; /* Gölge yok */ } .navlink:hover, .navlink:focus { background-color: #e2e6ea; /* Hover durumunda çok hafif koyulaşan arka plan */ color: #0056b3; /* Hover durumunda mavi yazı rengi */ } /* H1 Başlıkları için Optimize Edilmiş Stil */ .post-content .post-body h1 { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 30px; color: #000; /* Net ve koyu renk, okunabilirlik için mükemmel */ margin-top: 24px; margin-bottom: 16px; line-height: 1.4; /* İdeal satır yüksekliği */ font-weight: 700; /* Çarpıcı ve okunaklı kalınlık */ } /* H2 Başlıkları için Optimize Edilmiş Stil */ .post-content .post-body h2 { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 26px; color: #222; /* Net ve okunabilirlik için ideal */ margin-top: 20px; margin-bottom: 14px; line-height: 1.4; font-weight: 600; } /* H3 Başlıkları için Optimize Edilmiş Stil */ .post-content .post-body h3 { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 22px; color: #333; /* Göz yormayan renk tonu */ margin-top: 18px; margin-bottom: 12px; line-height: 1.4; font-weight: 500; } /* Paragraf için Optimize Edilmiş Stil */ .post-content .post-body p {
    font-family: 'Jost', Helvetica, sans-serif; /* Yazı tipini Jost, Helvetica, sans-serif olarak değiştir */
    font-size: 20px; /* Font boyutunu 20px olarak ayarla */
    color: #000000; /* Yazı rengi siyah (#000000) */
    line-height: 1.6; /* Satır yüksekliği rahat bir okuma için ayarlandı */
    margin: 12px 0 12px 24px; /* Margin ayarları: üst 12px, sağ 0px, alt 12px, sol 24px */
} /* Bold (Kalın) Metin için Optimize Edilmiş Stil */ .post-content .post-body strong, .post-content .post-body b { font-weight: bold; color: #000; /* Dikkat çekici koyu renk */ } /* Sıralı ve Sırasız Listeler için Optimize Edilmiş Stil */ .post-body ol, .post-body ul { font-family: 'Helvetica Neue', Arial, sans-serif; /* Net ve modern bir görünüm */ font-size: 18px; /* Okunabilirlik için ideal boyut */ color: #333; /* Net ve okunabilir koyu gri renk */ line-height: 1.7; /* Metin arasında yeterli boşluk */ margin-top: 12px; /* Liste öncesinde boşluk */ margin-bottom: 12px; /* Liste sonrasında boşluk */ padding-left: 40px; /* Liste madde işaretleri için yeterli iç boşluk */ } /* Sırasız Listeler için Özel Stil */ .post-body ul { list-style-type: circle; /* Modern ve zarif daire şeklinde işaretleyiciler */ } /* Sıralı Listeler için Özel Stil */ .post-body ol { list-style-type: decimal; /* Net ve okunabilir sayısal işaretleyiciler */ } /* Liste Öğeleri için Stil */ .post-body li { margin-bottom: 8px; /* Liste öğeleri arasında dengeli boşluk */ } .post-content .post-body a { color: #007bff; /* Canlı mavi ton, görsel olarak dikkat çeker ve SEO için iyi bir uygulamadır */ text-decoration: none; /* Alt çizgiyi kaldırır */ background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #ffdc80 50%); /* Arka planda gradyan efekti oluşturur */ background-size: 220%; /* Arka plan genişliğini ayarlar */ transition: background-position 0.4s, color 0.3s; /* Geçiş efektleri */ font-weight: 500; /* Hafifçe kalın font, okunabilirliği artırır */ } .post-content .post-body a:hover, .post-content .post-body a:focus { color: #0056b3; /* Hover ve focus durumlarında daha koyu bir maviye dönüşür */ text-decoration: none; /* Alt çizgiyi korur */ background-position: -100%; /* Hover efekti için arka plan pozisyonunu değiştirir */ outline: none; /* Odaklanma anında dış çizgiyi kaldırır */ } /* General Table Styling for Width and Centering */ table { width: 100%; /* Full width for better visibility */ margin: 0 auto; /* Center the table */ border-spacing: 0; /* Removes space between borders */ border-collapse: collapse; /* Collapses cell borders */ } /* Table Head (thead) Styling */ .thead { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #f7f7f7; color: #333; font-weight: bold; text-align: left; padding: 15px; /* Slightly increased padding */ border-bottom: 2px solid #eaeaea; } /* Table Header (th) Styling */ th { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 18px; color: #333; padding: 15px; /* Increased padding for better spacing */ border-bottom: 2px solid #eaeaea; } /* Table Body (tbody) Styling */ tbody { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 16px; color: #444; line-height: 1.6; } /* Table Row (tr) Styling */ tr { border-bottom: 1px solid #eaeaea; } /* Table Data (td) Styling */ td { padding: 15px; /* Increased padding for a better visual appeal */ text-align: left; } /* Table Footer (tfoot) Styling */ tfoot { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #f9f9f9; color: #333; font-weight: bold; text-align: left; padding: 15px; border-top: 2px solid #eaeaea; } /* Hover Effect on Rows */ tr:hover { background-color: #f5f5f5; } /* Links within Table */ td a { color: #007bff; text-decoration: none; transition: color 0.3s ease; } td a:hover { color: #0056b3; } /* Responsive Table Styling */ @media screen and (max-width: 768px) { table { width: 100%; } /* Additional responsive styles can be added here */ } .post-content .post-body * { background-repeat: no-repeat !important; } .post-thumbnail img, .post-body img { width: 100%; height: auto; object-fit: cover; border-radius: 10px; margin: 15px 0; /* Varsayılan margin */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; display: block; } /* Mobil için ortalama ve margin devre dışı */ @media (max-width: 768px) { .post-thumbnail img, .post-body img { margin-left: auto !important; margin-right: auto !important; max-height: 300px; float: none !important; /* Mobilde hizalama iptali */ } }.comment-area { background: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); margin-top: 20px; font-family: 'Helvetica Neue', Arial, sans-serif; } .review-and-rating-form-title, .title-heading { font-size: 24px; color: #333; margin-bottom: 15px; text-align: center; } .commentList { margin-top: 20px; } .comment { padding: 10px; border-bottom: 1px solid #eee; } .comHead { display: flex; align-items: center; justify-content: space-between; } .comHead .costumer { font-weight: bold; color: #333; } .comHead span { color: #888; font-size: 14px; } .star-rating { display: flex; } .rating-icon { font-size: 20px; color: #ccc; } .rating-icon.checked { color: #f80; } .comContent p { margin-top: 10px; line-height: 1.4; color: #555; } .MoreComment { text-align: center; margin-top: 20px; } .smcommentBTN { display: inline-block; background-color: #007bff; color: #fff; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .smcommentBTN:hover { background-color: #0056b3; } .addComment { margin-top: 40px; } .addComment form { background: #f4f4f4; padding: 20px; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); } .addComment input[type="text"], .addComment input[type="email"], .addComment textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; } .addComment .star-rating-label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; } .rating { display: flex; } .rating .star { font-size: 20px; color: #ccc; cursor: pointer; transition: color 0.3s; } .rating .star:hover, .rating .star:hover ~ .star, .rating .star.active { color: #f80; } .addComment .btn { background-color: #5cb85c; color: #fff; padding: 10px 20px; border-radius: 5px; display: inline-block; border: none; cursor: pointer; transition: background-color 0.3s; } .addComment .btn:hover { background-color: #4cae4c; } .icon { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .icon i { margin-left: 10px; font-size: 24px; color: #555; } .recaptcha { margin-top: 10px; } @media (max-width: 768px) { .comHead { flex-direction: column; align-items: flex-start; } .comHead .costumer, .comHead span { margin-bottom: 5px; } .rating .star { font-size: 18px; } .icon i { font-size: 20px; } }