@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  --bg-color: #f8f9fa; --text-color: #111; --card-bg: #fff; --border-color: #ddd;
  --header-bg: #f7f79; --weekend-bg: #fff6f6; --weekend-text: #d20000;
  --resmi-bg: #ffe6e6; --dini-bg: #e9f7ff; --bayram-bg: #dff6e5; --tatil-bg: #fff7da;
  --highlight-outline: #4A90E2; --search-highlight-bg: #ffec8b; --note-indicator-color: #4A90E2;
  --today-outline: #d20000;
  --progress-bar-term: #4A90E2;
  --progress-bar-year: #28a745;
}
body.dark-mode {
  --bg-color: #121212; --text-color: #e0e0e0; --card-bg: #1e1e1e; --border-color: #444;
  --header-bg: #2a2a2a; --weekend-bg: #3c1e1e; --weekend-text: #ff8a8a;
  --resmi-bg: #4d2626; --dini-bg: #1e3a4c; --bayram-bg: #1e4228; --tatil-bg: #4d4323;
  --highlight-outline: #58a6ff; --search-highlight-bg: #f9d71c; --note-indicator-color: #58a6ff;
  --today-outline: #ff8a8a;
  --progress-bar-term: #58a6ff;
  --progress-bar-year: #3ddc84;
}
@page { size: A4; margin: 10mm; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { font-family: 'Inter', Arial, Helvetica, sans-serif; color: var(--text-color); background-color: var(--bg-color); transition: background-color 0.3s, color 0.3s; }
h1 { margin: 0 0 4px 0; font-size: 19px; text-align: center;}
h2 { margin: 0 0 8px 0; font-size: 12px; font-weight: 500; color: #888; text-align: center; }
.main-container { max-width: 1200px; margin: 0 auto; padding: 0 10px; }

/* Bugün Durum Paneli */
.current-day-status-panel { text-align: center; padding: 12px; margin: 15px 0; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; }
.current-day-status-panel #today-date { font-size: 16px; font-weight: 600; margin: 0 0 5px 0; }
.current-day-status-panel #today-date strong { margin-right: 8px; color: var(--text-color); }
.current-day-status-panel #today-status { font-size: 14px; font-weight: 700; color: var(--highlight-outline); padding: 4px 10px; border-radius: 8px; background-color: rgba(74, 144, 226, 0.1); display: inline-block; }
body.dark-mode .current-day-status-panel #today-status { background-color: rgba(88, 166, 255, 0.2); }

/* Sayaç Paneli */
.day-counter-panel { text-align: center; padding: 12px; margin: 15px 0; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; }
.day-counter-panel h3 { margin: 0 0 8px; font-size: 14px; color: var(--highlight-outline); }
.day-counter-panel .counters { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.day-counter-panel .counter-item span { font-weight: 700; font-size: 16px; }

/* Kontrol Paneli */
.controls-container { margin: 15px 0; padding: 12px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "countdown countdown" "search filters" "actions actions"; gap: 12px; }
.countdown-timer { grid-area: countdown; text-align: center; padding: 10px; border-radius: 8px; background: var(--highlight-outline); color: white; display: flex; flex-direction: column; gap: 8px; align-items: center;}
.countdown-timer-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;}
.countdown-timer h4 { margin: 0; font-size: 12px; opacity: 0.9; }
#countdown-select { background-color: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; padding: 2px 5px; font-size: 11px; }
#countdown-select option { color: black; background-color: white; }
#countdown { font-size: 20px; font-weight: 700; }
.search-controls { grid-area: search; } .search-controls input { width: 100%; border: 1px solid var(--border-color); border-radius: 8px; padding: 8px; background: var(--bg-color); color: var(--text-color); }
.filter-controls { grid-area: filters; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; justify-content: flex-start; font-size: 11px; overflow: hidden; }
.filter-controls label { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.filter-controls strong { flex-shrink: 0; }
.actions-container { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; border-top: 1px solid var(--border-color); padding-top: 10px; }
.actions-container button { border:1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); padding:8px 12px; border-radius:10px; cursor:pointer; font-size:12px; }

/* Takvim */
.calendar { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.month { border:1px solid var(--border-color); border-radius:12px; overflow:hidden; background:var(--card-bg); display: flex; flex-direction: column; }
.month-header { background:var(--header-bg); padding:6px 8px; text-align: center; border-bottom:1px solid var(--border-color); font-weight:700; }
.month-grid { display:grid; grid-template-columns: repeat(7, 1fr); border-top:1px solid var(--border-color); border-left:1px solid var(--border-color); flex-grow: 1; }
.dow { font-size:11px; color:#888; background:var(--header-bg); padding:4px 0; font-weight:600; text-align: center; border-right:1px solid var(--border-color); border-bottom:1px solid var(--border-color); }
.day { position:relative; padding: 2px; font-size: 13px; cursor: pointer; transition: transform 0.2s, opacity 0.3s; border-right:1px solid var(--border-color); border-bottom:1px solid var(--border-color); min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.num-wrapper { position: relative; padding-top: 2px; display: flex; align-items: center; justify-content: center; }
.day .num { font-weight:700; font-size: 14px; } .ders-bold .num { font-weight: 800; }
.day .mini { position:absolute; left:2px; right:2px; bottom:2px; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align: center;}
.day:hover { transform: scale(1.05); z-index: 10; box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.day.filtered-out { opacity: 0.3; pointer-events: none; } .day.search-highlight { background-color: var(--search-highlight-bg) !important; color: #000 !important; }
.day.today { outline: 2px solid var(--today-outline); outline-offset: -2px; }
.day .note-indicator { position: absolute; top: 0px; right: 0px; width: 6px; height: 6px; background-color: var(--note-indicator-color); border-radius: 50%; transform: translate(50%, -50%); }
.month-footer { display:flex; justify-content:flex-end; padding:6px 8px; font-size:11px; border-top:1px solid var(--border-color); background:var(--header-bg); font-weight:700; }
.haftasonu { background:var(--weekend-bg); } .haftasonu .num { color:var(--weekend-text); }
.resmi { background:var(--resmi-bg); } .dini { background:var(--dini-bg); } .bayram { background:var(--bayram-bg); } .ara-tatil, .yariyil-tatil { background:var(--tatil-bg); }
.weeknum-badge{ font:600 9px/1 ui-sans-serif,system-ui; padding:.1rem .25rem; border-radius:.25rem; border:1px solid rgba(0,0,0,0.1); background:rgba(255,255,255,0.7); color:#333; margin-right: 4px; }
body.dark-mode .weeknum-badge { background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.2); color: #ccc;}

/* Özet, Sosyal Medya ve Alt Bilgi */
.sections4 { display:grid; grid-template-columns:1fr 1fr 2fr; gap:10px; margin-top:15px; }
.section { border:1px solid var(--border-color); border-radius:10px; padding:8px; background:var(--card-bg); font-size:11px; }
.section h3 { margin:0 0 4px 0; font-size:12px; text-align:center; }
.hlist { list-style: none; padding: 0; margin: 0; font-size: 11px; line-height: 1.6;}
.hlist li { margin:2px 0; padding-left: 10px; position: relative;}
.hlist li::before { content: '•'; position: absolute; left: 0; color: var(--highlight-outline); }
.dini-cols { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.social-share { margin: 20px 0; padding: 20px; background: var(--card-bg); border-radius: 12px; text-align: center; border: 1px solid var(--border-color); }
.social-share h4 { margin: 0 0 15px 0; font-size: 14px; color: #888; font-weight: 600; }
.share-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.share-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 500; color: white; min-width: 100px; justify-content: center; }
.share-btn.whatsapp { background: #25D366; } .share-btn.telegram { background: #0088cc; } .share-btn.facebook { background: #1877f2; } .share-btn.twitter { background: #1da1f2; }
.footer-note { font-size:10px; color:#888; margin-top:15px; text-align: center; }
.header-with-logo { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 20px 0 10px; }
.header-logo { max-height: 40px; }
.footer-site { text-align:center; margin:12px 0; font-size:10px; color:#888; } .footer-site a { color:#888; text-decoration:none; }

/* Responsive Tasarım */
@media (max-width: 992px) { 
    .calendar { grid-template-columns: 1fr; }
    .sections4 { grid-template-columns: 1fr; }
    .day-counter-panel .counters { flex-direction: column; gap: 5px; }
    .controls-container { grid-template-columns: 1fr; grid-template-areas: "countdown countdown" "search" "filters" "actions"; }
}
@media (max-width: 600px) { 
    .dini-cols { grid-template-columns: 1fr; }
    .header-with-logo { flex-direction: column; gap: 10px; }
    .header-with-logo .header-logo { order: 2; max-height: 35px; }
    .header-with-logo div { order: 1; }
}
@media (max-width: 420px) {
    .countdown-timer { padding: 8px; }
    .countdown-timer-header { gap: 6px; }
    #countdown { font-size: 18px; }
    .countdown-timer h4, #countdown-select { font-size: 10px; }
    .day-counter-panel .counter-item { flex: 1 1 100%; }
}
@media print { 
    body, html { font-size: 9pt; } 
    body.dark-mode { --bg-color: #fff; --text-color: #000; } 
    .controls-container, .header-logo, .social-share, .weeknum-badge, .actions-container, .footer-site, .modal, .footer-note, .day-counter-panel, #month-nav, #print-modal { display: none !important; } 
    .main-container { padding: 0; } 
    .calendar { grid-template-columns: repeat(3, 1fr); gap: 2mm; } 
    .month { box-shadow: none; border: 1px solid #999; page-break-inside: avoid; } 
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } 
    .day-counter-panel, .current-day-status-panel, #progress-container { display: none; } 
}

/* YENİ EKLENEN ÖZELLİKLERİN STİLLERİ */
.hidden { display: none !important; }
#dayDetailPanel { position: fixed; right: -350px; top: 0; width: 320px; height: 100%; background: var(--card-bg); border-left: 1px solid var(--border-color); box-shadow: -4px 0 15px rgba(0,0,0,0.1); transition: right 0.3s ease-in-out; z-index: 1001; padding: 20px; overflow-y: auto; font-size: 14px; }
#dayDetailPanel.visible { right: 0; }
#dayDetailPanel h3 { margin: 0 0 10px 0; font-size: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
#dayDetailPanel .event-item { padding: 5px; border-radius: 4px; margin-bottom: 5px; background: var(--header-bg); }
#dayDetailPanel #panel-close { position: absolute; top: 15px; right: 15px; font-size: 24px; cursor: pointer; border: none; background: none; color: var(--text-color); }
#dayDetailPanel textarea { width: 100%; height: 120px; margin-top: 10px; padding: 8px; border-radius: 5px; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); }
#dayDetailPanel .panel-buttons { display: flex; gap: 10px; margin-top: 10px; }
#dayDetailPanel button { flex-grow: 1; padding: 8px; border: none; border-radius: 5px; cursor: pointer; }
.btn-save { background-color: #28a745; color: white; }
.btn-delete { background-color: #dc3545; color: white; }
#monthly-stats { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); font-size: 12px; }
#monthly-stats h4 { margin: 0 0 8px; } #monthly-stats p { margin: 4px 0; }
.day:hover { transform: scale(1.03); box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.15s ease-in-out; }

.filter-scroll-wrapper { display: flex; flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; gap: 12px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.filter-scroll-wrapper::-webkit-scrollbar { height: 4px; background-color: transparent; }
.filter-scroll-wrapper::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; }

.progress-container { margin: 15px 0; padding: 12px; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; }
.progress-bar-wrapper { background-color: var(--header-bg); border-radius: 10px; overflow: hidden; padding: 2px; }
.progress-bar { height: 20px; border-radius: 8px; width: 0%; transition: width 0.5s ease-in-out; text-align: center; color: white; font-size: 12px; line-height: 20px; }
#term-progress-container .progress-bar { background-color: var(--progress-bar-term); }
#year-progress-container .progress-bar { background-color: var(--progress-bar-year); }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; flex-wrap: wrap; gap: 5px;}
.progress-header-text { font-size: 12px; font-weight: 500; }
.progress-toggle { font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 4px; }

#month-nav { position: fixed; top: 50%; right: 0; transform: translateY(-50%); background-color: rgba(255,255,255,0.8); backdrop-filter: blur(5px); border: 1px solid var(--border-color); border-right: none; border-radius: 8px 0 0 8px; display: flex; flex-direction: column; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 998; }
body.dark-mode #month-nav { background-color: rgba(30,30,30,0.8); }
#month-nav.visible { opacity: 1; pointer-events: auto; }
#month-nav a { padding: 4px 8px; text-decoration: none; color: var(--text-color); font-size: 11px; font-weight: 600; }
#month-nav a:hover { background-color: var(--header-bg); }

#weekly-view { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; margin-top: 15px; background-color: var(--card-bg); }
#weekly-nav { display: flex; justify-content: space-between; padding: 8px; background-color: var(--header-bg); border-bottom: 1px solid var(--border-color); align-items: center; flex-wrap: wrap; gap: 8px;}
#weekly-nav button { font-size: 11px; padding: 4px 8px; border-radius: 6px; }
#weekly-title { font-weight: 600; font-size: 12px; text-align: center; flex-grow: 1; }
.weekly-day { display: flex; border-bottom: 1px solid var(--border-color); }
.weekly-day:last-child { border-bottom: none; }
.weekly-day-date { flex-basis: 100px; flex-shrink: 0; padding: 10px; font-weight: 700; border-right: 1px solid var(--border-color); background-color: var(--header-bg); text-align: center;}
.weekly-day-date span { font-size: 11px; font-weight: 400; display: block; }
.weekly-day-content { padding: 10px; flex-grow: 1; }
.weekly-day-content ul { padding-left: 20px; margin: 0; font-size: 13px; }
.weekly-day-content .user-note { background: var(--dini-bg); padding: 5px; border-radius: 4px; margin-top: 5px; font-style: italic; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: var(--card-bg); margin: 15% auto; padding: 20px; border: 1px solid var(--border-color); width: 90%; max-width: 500px; border-radius: 12px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; }
.modal-header h3 { margin: 0; }
.modal-header .close-btn { font-size: 28px; font-weight: bold; cursor: pointer; }
.print-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.print-option-btn { width: 100%; padding: 12px; font-size: 14px; }

@media (max-width: 768px) {
    .day { font-size: 12px; padding: 4px; min-height: 48px;} .day .num { font-size: 13px; }
    .main-container { padding: 0 5px; }
    #dayDetailPanel { width: 100%; right: -100%; } #dayDetailPanel.visible { right: 0; }
    #month-nav { display: none; }
    .weekly-day { flex-direction: column; }
    .weekly-day-date { border-right: none; border-bottom: 1px solid var(--border-color); }
}
@media (max-width: 500px) {
    .print-options-grid { grid-template-columns: 1fr; }
}