*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:20px 0;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
header h2{font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}
.live-clock{text-align:right;font-size:1.1rem}
.calendar-body span,.calendar-grid h2,.footer-content,.month-calendar h3,.month-link,.month-links h3,.nav-link{text-align:center}
#indonesia-time{font-size:1.5rem;font-weight:700;margin-bottom:5px}
#indonesia-date{font-size:1rem;opacity:.9}
.main-nav{background:#34495e;padding:15px 0;border-bottom:3px solid #e74c3c}
.nav-menu{display:flex;list-style:none;justify-content:center;flex-wrap:wrap;gap:30px}
.nav-menu li a{color:#fff;text-decoration:none;padding:10px 20px;border-radius:25px;transition:.3s;font-weight:500;background:rgba(255,255,255,.1)}
.nav-menu li a:hover{background:#e74c3c;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.2)}
main{margin:50px auto} /* CHANGED: Increased top and bottom margin for more space */
.calendar-grid h2{margin-bottom:30px;font-size:2rem;color:#2c3e50}
.months-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin-bottom:40px}
.calendar-body,.calendar-header{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calendar-mini,.month-calendar h3{margin-bottom:15px}
.month-calendar{background:#fff;border-radius:10px;padding:20px;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s}
.month-calendar:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.15)}
.month-calendar h3{color:#2c3e50;font-size:1.3rem;font-weight:600}
.calendar-header{margin-bottom:10px}
.main-content,.month-links,.related-articles{box-shadow:0 4px 15px rgba(0,0,0,.1);margin-bottom:30px}
.calendar-header span{background:#34495e;color:#fff;padding:8px 4px;text-align:center;font-size:.85rem;font-weight:600;border-radius:4px}
.main-content h2,.month-links h3{color:#2c3e50;margin-bottom:20px}
.calendar-body span{padding:8px 4px;font-size:.9rem;min-height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:.2s}
.footer-links a,.related-articles a{text-decoration:none;transition:color .3s}
.calendar-body span:not(:empty){background:#ecf0f1;cursor:pointer}
.calendar-body span:not(:empty):hover{background:#d5dbdb;transform:scale(1.1)}
.calendar-body .sunday{background:#e74c3c!important;color:#fff;font-weight:700}
.calendar-body .holiday{background:#f39c12!important;color:#fff;font-weight:700}
.month-link{display:block;padding:10px 15px;background:#3498db;color:#fff;text-decoration:none;border-radius:5px;font-weight:500;transition:background .3s}
.month-link:hover{background:#2980b9}
.month-links,.related-articles{background:#fff;padding:30px;border-radius:10px}
.month-links h3{font-size:1.5rem}
.month-navigation{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}
.nav-link{display:block;padding:12px 20px;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;text-decoration:none;border-radius:8px;font-weight:500;transition:.3s}
.nav-link:hover{background:linear-gradient(135deg,#2980b9,#1f618d);transform:translateY(-2px);box-shadow:0 4px 12px rgba(52,152,219,.3)}
.main-content{background:#fff;padding:40px;border-radius:10px;line-height:1.8}
.main-content h2{font-size:2rem;border-bottom:3px solid #3498db;padding-bottom:10px}
.main-content h3{color:#34495e;margin:25px 0 15px;font-size:1.4rem}
.main-content p{margin-bottom:15px;text-align:justify}
.main-content ol,.main-content ul{margin:15px 0;padding-left:30px}
.main-content li{margin-bottom:8px}
.main-content strong{color:#2c3e50}
.related-articles h3{margin-bottom:20px;color:#2c3e50;font-size:1.5rem;border-bottom:2px solid #e74c3c;padding-bottom:10px}
.related-articles ul{list-style:none;padding:0}
.related-articles li{margin-bottom:12px;padding-left:20px;position:relative}
.related-articles li::before{content:"▶";position:absolute;left:0;color:#e74c3c;font-weight:700}
.related-articles a{color:#3498db;font-weight:500}
.related-articles a:hover{color:#2980b9;text-decoration:underline}
footer{background:#2c3e50;color:#fff;padding:30px 0;margin-top:50px}
.footer-content p{margin-bottom:15px;font-size:1rem}
.footer-links{font-size:.9rem}
.footer-links a{color:#bdc3c7;margin:0 5px}
.footer-links a:hover{color:#3498db;text-decoration:underline}
@media (max-width:768px){.header-content,.live-clock{text-align:center}.month-navigation,.months-grid{grid-template-columns:1fr}.header-content{flex-direction:column;gap:15px}header h1{font-size:2rem}.nav-menu{gap:15px;justify-content:center}.nav-menu li a{padding:8px 15px;font-size:.9rem}.months-grid{gap:20px}.main-content{padding:25px}.main-content h2{font-size:1.6rem}.calendar-header span{font-size:.75rem;padding:6px 2px}.calendar-body span{font-size:.8rem;min-height:28px}}
@media (max-width:480px){.container{padding:0 15px}header h1{font-size:1.8rem}.main-content{padding:20px}.month-calendar{padding:15px}.calendar-header span{font-size:.7rem;padding:5px 2px}.calendar-body span{font-size:.75rem;min-height:26px}}
.calendar-body span,.month-calendar,.nav-link{will-change:transform}
@media print{.footer,.main-nav,.related-articles{display:none}body{background:#fff}.month-calendar{box-shadow:none;border:1px solid #ddd}}

/* --- ADDED FOR SOCIAL MEDIA SIDEBAR --- */
.social-sidebar {position: fixed;top: 50%;right: 0;transform: translateY(-50%);z-index: 1000;}
.social-sidebar a {display: flex;align-items: center;justify-content: center;padding: 15px;background-color: #000;color: #fff;text-decoration: none;border-top-left-radius: 10px;border-bottom-left-radius: 10px;box-shadow: -2px 2px 8px rgba(0,0,0,0.2);transition: background-color 0.3s, transform 0.3s;}
.social-sidebar a:hover {background-color: #333;transform: translateX(-5px);}
.social-sidebar svg {display: block;}

/* Responsive Social Sidebar for Mobile */
@media (max-width: 768px) {.social-sidebar {top: auto;bottom: 20px;right: 20px;transform: none;}
.social-sidebar a {width: 50px;height: 50px;padding: 13px;border-radius: 50%;}
.social-sidebar a:hover {transform: scale(1.1) translateX(0);}}

/* Style for New Tools Updates button */
.new-update-btn {color: #fff;padding: 6px 12px;border-radius: 15px;font-size: 14px;font-weight: normal;text-decoration: none;box-shadow: 0 0 6px #fbff00, 0 0 12px #001aff;transition: 0.3s ease;}
.new-update-btn:hover {background: #3902ff;box-shadow: 0 0 10px #ff3366, 0 0 20px #ff3366;}

/* --- STYLES FOR AGE CALCULATOR TOOL --- */
.tool-wrapper {background: #fff;padding: 30px 40px;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,.1);margin-bottom: 30px;}
.tool-wrapper h1 {text-align: center;color: #2c3e50;font-size: 2.2rem;margin-bottom: 10px;}
.tool-subtitle {text-align: center;color: #555;font-size: 1.1rem;margin-bottom: 30px;max-width: 600px;margin-left:auto; margin-right:auto;}
.age-calculator-form {display: flex;justify-content: center;align-items: flex-end;gap: 20px;flex-wrap: wrap;margin-bottom: 25px;}
.form-group {display: flex;flex-direction: column;}
.form-group label {font-size: 0.9rem;color: #34495e;margin-bottom: 8px;font-weight: 600;}
.form-group input[type="date"] {padding: 12px 15px;border: 2px solid #ddd;border-radius: 8px;font-size: 1rem;color: #333;transition: border-color .3s, box-shadow .3s;outline: none;min-width: 220px;}
.form-group input[type="date"]:focus {border-color: #3498db;box-shadow: 0 0 8px rgba(52, 152, 219, .2);}
.tool-button {padding: 13px 30px;font-size: 1rem;font-weight: 700;color: #fff;background: linear-gradient(135deg, #e74c3c, #c0392b);border: none;border-radius: 8px;cursor: pointer;transition: all .3s;box-shadow: 0 4px 12px rgba(231, 76, 60, .3);}
.tool-button:hover {transform: translateY(-3px);box-shadow: 0 6px 15px rgba(231, 76, 60, .4);}
.error-msg {text-align: center;color: #e74c3c;background-color: #fdd;padding: 10px;border-radius: 5px;margin: -10px auto 20px;max-width: 500px;display: none;font-weight: 500;}
.results-wrapper {margin-top: 40px;}
.summary-card {background: linear-gradient(135deg, #2c3e50, #34495e);color: #fff;border-radius: 10px;padding: 30px;text-align: center;margin-bottom: 40px;}
.summary-card h2 {font-size: 1.5rem;margin-bottom: 20px;opacity: .9;}
.summary-display {display: flex;justify-content: space-around;align-items: center;}
.summary-display div span {font-size: 3.5rem;font-weight: 700;display: block;}
.summary-display div p {font-size: 1.1rem;opacity: .8;}
.details-section, .fun-facts-section {margin-bottom: 30px;}
.details-section h3, .fun-facts-section h3 {font-size: 1.6rem;color: #2c3e50;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #ecf0f1;text-align: center;}
.details-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 15px;}
.detail-card {background: #f8f9fa;padding: 20px;border-radius: 8px;text-align: center;border: 1px solid #e9ecef;}
.detail-card p {font-size: 0.9rem;color: #555;margin: 0 0 8px;}
.detail-card span {font-size: 1.8rem;font-weight: 600;color: #3498db;}
.facts-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 20px;}
.fact-card {background: #fff;padding: 25px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,.07);border-left: 5px solid #3498db;}
.fact-card h4 {font-size: 1.2rem;margin-bottom: 15px;color: #34495e;}
.fact-card p {margin-bottom: 15px;}
.progress-bar-container {width: 100%;background-color: #ecf0f1;border-radius: 25px;height: 10px;margin-bottom: 10px;overflow: hidden;}
.progress-bar {height: 100%;width: 0%;background: linear-gradient(90deg, #3498db, #2980b9);border-radius: 25px;transition: width 1s ease-in-out;}
.fact-card small {color: #777;font-size: 0.85rem;}
.zodiac-display {font-size: 1.8rem;font-weight: 600;color: #2c3e50;text-align: center;margin-top:10px;}

@media(max-width: 768px) {
    .tool-wrapper {padding: 25px 20px;}
    .tool-wrapper h1 {font-size: 1.8rem;}
    .tool-subtitle {font-size: 1rem;}
    .age-calculator-form {flex-direction: column;align-items: stretch;gap: 15px;}
    .form-group input[type="date"] {width: 100%; min-width: unset;}
    .summary-display div span {font-size: 2.5rem;}
    .summary-display div p {font-size: 1rem;}
}
@media(max-width: 480px) {
    .summary-display {flex-direction: column; gap: 20px;}
    .details-grid {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}
    .detail-card span {font-size: 1.5rem;}
}