:root {
    --bg-color: #121212;
    --card-color: rgba(30, 30, 45, 0.7);
    --text-color: #e0e0e0;
    --primary-color: #4CAF50;
    --secondary-color: #BB86FC;
    --border-radius: 12px;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

    --group-1: #E53935; 
    --group-2: #4CAF50; 
    --group-3: #2196F3; 
}

.cakma33-container { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #0f0f1d, #1a1a2e); color: var(--text-color); margin: 0; padding: 0; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }

.app-container { width: 100%; max-width: 1000px; padding: 0; margin-top: 20px; box-sizing: border-box; }
.card { background-color: var(--card-color); backdrop-filter: blur(5px); padding: 20px; border-radius: var(--border-radius); box-shadow: var(--shadow); margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.1); margin: 0 10px 20px 10px; box-sizing: border-box; width: calc(100% - 20px); max-width: 980px; }
h2 { font-size: 1.5rem; color: var(--text-color); margin-bottom: 15px; border-bottom: 2px solid var(--secondary-color); padding-bottom: 5px; }
.controls { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 20px; }
.control-item label { display: block; margin-bottom: 5px; font-size: 0.9rem; color: var(--text-color); }
.controls select, .controls input[type="date"], #applyButton { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background-color: rgba(0,0,0,0.4); color: var(--text-color); font-size: 1rem; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
#applyButton { background-color: var(--primary-color); color: #1a1a2e; font-weight: bold; grid-column: span 2; transition: background-color 0.3s, transform 0.1s; }
#applyButton:hover { background-color: #66BB6A; transform: translateY(-1px); }
@media (max-width: 600px) { .controls { grid-template-columns: 1fr; } #applyButton { grid-column: span 1; } }

.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; background-color: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: var(--border-radius); }
.calendar-header button { background: none; border: none; color: var(--secondary-color); font-size: 1.5rem; cursor: pointer; padding: 5px 10px; border-radius: 50%; transition: background-color 0.3s; }
.calendar-header button:hover { background-color: rgba(255,255,255,0.1); }
#currentMonthYear { font-size: 1.2rem; font-weight: bold; }
.day-names { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: bold; margin-bottom: 10px; color: #BDBDBD; }
.day-names div { padding: 5px 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.day-cell { padding: 6px 1px; min-height: 80px; background-color: rgba(0,0,0,0.2); border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; transition: background-color 0.2s; cursor: default; overflow: hidden; }
.empty-cell { background-color: transparent !important; border: none !important; cursor: default; }
.day-number { font-weight: bold; font-size: 0.9rem; align-self: flex-start; margin-bottom: 2px; margin-left: 2px; }
.today .day-number { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); }
.shift-icon { font-size: 1.4rem; margin: 2px 0; line-height: 1.2; }
.shift-label { font-size: 0.65rem; font-weight: 500; padding: 1px 2px; border-radius: 4px; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 350px) { .day-cell { min-height: 70px; padding: 4px 1px; } .shift-icon { font-size: 1.1rem; } .shift-label { font-size: 0.55rem; } .day-number { font-size: 0.75rem; } }
.gunduz .shift-label { background-color: var(--group-color, var(--group-1)); color: #121212; }
.gece .shift-label { background-color: var(--group-color, var(--group-1)); color: var(--text-color); }
.izin .shift-label { background-color: #383850; color: var(--text-color); opacity: 0.8; }
.group-1-color { --group-color: var(--group-1); }
.group-2-color { --group-color: var(--group-2); }
.group-3-color { --group-color: var(--group-3); }