@page { size: A4; margin: 10mm; }
* { box-sizing: border-box; }
html, body { font-family: 'Inter', Arial, Helvetica, sans-serif; color:#111; }
h1 { margin: 0 0 4px 0; font-size: 19px; }
h2 { margin: 0 0 8px 0; font-size: 12px; font-weight: 500; color:#444; }

.toolbar { display:flex; gap:8px; margin: 8px 0 10px; }
.toolbar button {  border:1px solid #ccc;  background:#fff;  padding:8px 12px;  border-radius:10px;  cursor:pointer;  box-shadow: 0 1px 2px rgba(0,0,0,.06);  font-size:12px;  transition: all 0.2s ease;}
.toolbar button:hover {  background:#4A90E2;  color: white;  border-color: #4A90E2;  transform: translateY(-1px);  box-shadow: 0 3px 6px rgba(74, 144, 226, 0.3);}

.legend { display:flex; flex-wrap:wrap; gap:10px; margin: 6px 0 10px; font-size:10px; }
.legend .item { display:flex; align-items:center; gap:6px; }
.legend .sw { width:12px; height:12px; border-radius:3px; border:1px solid #999; }

.calendar { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.month {  border:1px solid #ddd;  border-radius:12px;  overflow:hidden;  background:#fff;  transition: all 0.3s ease;  box-shadow: 0 2px 4px rgba(0,0,0,0.06);  min-height: 280px;}

.month:hover {  box-shadow: 0 4px 12px rgba(0,0,0,0.12);  transform: translateY(-2px);}
.month-header {  background:#f7f7f9; padding:6px 8px; display:flex; justify-content:space-between; align-items:center;  border-bottom:1px solid #eee;}
.month-header .name { font-weight:700; letter-spacing:.2px; text-align: center; width: 100%; }

.month-grid {  display:grid;  grid-template-columns: repeat(7, 1fr);  gap: 0;  border-top:1px solid #e3e3e3;  border-left:1px solid #e3e3e3;}
.dow, .day {  border-right:1px solid #e3e3e3;  border-bottom:1px solid #e3e3e3;  min-height: 42px;  display:flex; align-items:center; justify-content:center;  text-align:center;}
.dow { font-size:11px; color:#666; background:#fbfbfc; padding:4px 0; font-weight:600; }
.day {  position:relative; padding: 2px; border-radius:0;  font-size: 13px; line-height: 1.2;}
.day .num { font-weight:700; font-size: 14px; }
.day .mini {  position:absolute; left:2px; right:2px; bottom:2px;  font-size:9px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.day:hover {  outline:2px solid #4A90E2;  outline-offset:-2px;  cursor:pointer;  transform: scale(1.05);  transition: all 0.2s ease;  z-index: 10;  position: relative;  box-shadow: 0 4px 8px rgba(0,0,0,0.15);}
.day {  transition: all 0.2s ease;}
.day .mini {  transition: opacity 0.2s ease;}
.day:hover .mini {  opacity: 1;  font-weight: bold;}
/* Color scheme */
.ders-gunu { background:#ffffff; }
.haftasonu { background:#fff6f6; } 
.haftasonu .num { font-style:italic; color:#d20000; }
.haftici-tatil { font-style:italic; }
.resmi { background:#ffe6e6; }
.resmi_arife { background:#fff0f0; }
.dini { background:#e9f7ff; }
.bayram { background:#dff6e5; }
.bayram_arife { background:#edfbf1; }
.ara-tatil, .yariyil-tatil { background:#fff7da; }

/* Emphasis for ders gunu */
.ders-bold { font-weight:800; font-size: 12px; }

.month-footer {  display:flex; justify-content:flex-end; gap:8px; padding:6px 8px; font-size:11px; color:#333;  border-top:1px solid #eee; background:#fafafa;}
.month-footer .workdays { font-weight:700; }

.sections { display:grid; grid-template-columns: 2fr 1fr; gap:12px; margin-top:10px; }
.card { border:1px solid #e1e1e1; border-radius:12px; padding:10px; background:#fff; }
.card h3 { margin:0 0 6px 0; font-size:13px; }

.hlist { font-size:11px; line-height:1.5; }
.hlist li { margin:2px 0; }

.footer-note { font-size:10px; color:#666; margin-top:8px; }
@media print {  .toolbar { display:none; }  .social-share { display: none; }
  @page {     size: A4;     margin: 8mm;  }
  * {    -webkit-print-color-adjust: exact !important;    print-color-adjust: exact !important;  }
  html, body {    margin: 0 !important;    padding: 0 !important;    width: 100% !important;    height: 100% !important;    overflow: hidden !important;    font-size: 8px !important;  }
  .print-container {    width: 194mm !important; /* A4 genişlik - margin */    height: 281mm !important; /* A4 yükseklik - margin */    margin: 0 !important;    padding: 0 !important;    display: flex !important;    flex-direction: column !important;    justify-content: flex-start !important;    box-sizing: border-box !important;    background: white !important;    position: relative !important;  }
  .header-with-logo {     height: 12mm !important;    display: flex !important;    flex-direction: row !important;    align-items: center !important;    justify-content: center !important;    gap: 3mm !important;    flex-wrap: nowrap !important;    flex-shrink: 0 !important;    margin-bottom: 2mm !important;  }
  .header-logo {     max-height: 10mm !important;    width: auto !important;    flex-shrink: 0 !important;    display: block !important;  }
  h1 {     font-size: 11px !important;     margin: 0 !important;    white-space: nowrap !important;    flex-shrink: 0 !important;    text-align: center !important;    display: block !important;    color: #000 !important;    font-weight: bold !important;  }
  .calendar {    width: 194mm !important;    height: 255mm !important;    display: grid !important;    grid-template-columns: repeat(3, 64mm) !important;    grid-template-rows: repeat(4, 62mm) !important;    gap: 1mm !important;    margin: 0 !important;    flex-shrink: 0 !important;  }
  
  /* Grid sıralaması - kronolojik olarak 3x4 düzen */
  .month:nth-child(1) { grid-area: 1 / 1; }
  .month:nth-child(2) { grid-area: 1 / 2; }
  .month:nth-child(3) { grid-area: 1 / 3; }
  .month:nth-child(4) { grid-area: 2 / 1; }
  .month:nth-child(5) { grid-area: 2 / 2; }
  .month:nth-child(6) { grid-area: 2 / 3; }
  .month:nth-child(7) { grid-area: 3 / 1; }
  .month:nth-child(8) { grid-area: 3 / 2; }
  .month:nth-child(9) { grid-area: 3 / 3; }
  .month:nth-child(10) { grid-area: 4 / 1; }
  .month:nth-child(11) { grid-area: 4 / 2; }
  .month:nth-child(12) { grid-area: 4 / 3; }

  .month {    width: 64mm !important;    height: 62mm !important;    border: 0.2mm solid #999 !important;    border-radius: 0.5mm !important;    overflow: hidden !important;    background: #fff !important;    position: relative !important;    margin: 0 !important;    padding: 0 !important;    transform: none !important;    display: flex !important;    flex-direction: column !important;    box-shadow: none !important;  }

  .month:hover {    transform: none;    box-shadow: none;  }
  .month-header {     height: 6mm;    padding: 0.5mm 1mm;    background: #f7f7f9;    border-bottom: 0.2mm solid #ddd;    display: flex;    align-items: center;    justify-content: center;    flex-shrink: 0;  }
  .month-header .name {     font-size: 11px;     font-weight: 700;    text-align: center;    color: #000;  }

  .month-grid {    height: 51mm;    display: grid;    grid-template-columns: repeat(7, 1fr);    grid-template-rows: 4.5mm repeat(6, 7.5mm);    gap: 0;    border-top: 0.2mm solid #ccc;    border-left: 0.2mm solid #ccc;    flex-grow: 1;  }
  .dow, .day {    border-right: 0.2mm solid #ccc;    border-bottom: 0.2mm solid #ccc;    display: flex;    align-items: center;    justify-content: center;    text-align: center;    padding: 0.3mm;    position: relative;    overflow: visible;  }
  .dow {     height: 4.5mm;    font-size: 7px;     color: #333;     background: #f5f5f5;     font-weight: 700;    line-height: 1;  }

  .day {    height: 7.5mm;    font-size: 8px;    line-height: 1.1;    flex-direction: column;    justify-content: flex-start;    align-items: center;    padding: 0.3mm;    position: relative;  }
  .day:hover {    transform: none;    outline: none;    box-shadow: none;  }
  .day .num {     font-weight: 700;     font-size: 9px;    line-height: 1;    margin-bottom: 0.3mm;    z-index: 2;    flex-shrink: 0;  }
  .day .mini {    position: absolute;    left: 0.3mm;    right: 0.3mm;    bottom: 0.3mm;    top: 2.8mm;    font-size: 5.5px;    line-height: 1.1;    white-space: normal;    overflow: hidden;    display: flex;    align-items: center;    justify-content: center;    text-align: center;    font-weight: 500;    z-index: 1;    word-break: break-word;    hyphens: auto;  }
  
  /* Uzun metinler için özel ayar */
  .day .mini {    word-break: break-word;    hyphens: auto;    white-space: normal;    font-size: 5.5px;  }

  .month-footer {    height: 5mm;    display: flex;    justify-content: flex-end;    align-items: center;    padding: 0.5mm 2mm;    font-size: 9px;    color: #000;    border-top: 0.3mm solid #999;    background: #f0f0f0;    flex-shrink: 0;    font-weight: 700;  }
  .month-footer .workdays {     font-weight: 700;   }

  /* İkinci sayfa için yeni stil */
  .page-break {    page-break-before: always !important;    break-before: page !important;  }
  .second-page {    width: 194mm !important;    height: 281mm !important;    margin: 0 !important;    padding: 8mm !important;    display: flex !important;    flex-direction: column !important;    box-sizing: border-box !important;    background: white !important;  }

  .sections4 {    width: 100% !important;    height: auto !important;    display: grid !important;    grid-template-columns: repeat(3, 1fr) !important;    gap: 4mm !important;    margin: 0 !important;    flex-grow: 1 !important;  }

  .section {     border: 0.3mm solid #ccc !important;    border-radius: 2mm !important;    padding: 4mm !important;    background: #fff !important;    font-size: 9px !important;    box-sizing: border-box !important;    overflow: hidden !important;    height: auto !important;    min-height: 60mm !important;  }
  .section:hover {    transform: none;    box-shadow: none;    border-color: #ccc;  }
  .section h3 {     font-size: 14px;     margin: 0 0 4mm 0;    text-align: center;    font-weight: 700;    color: #000;  }

  .hlist {     font-size: 9px;     line-height: 1.4;     margin: 0;     padding: 0;    list-style-position: inside;    list-style-type: disc;  }
  .hlist li {     margin: 1mm 0;    padding: 0;    color: #000;  }

  .second-page footer {    flex-shrink: 0 !important;    margin-top: 4mm !important;    height: auto !important;  }
  .second-page .footer-note {     font-size: 8px !important;    line-height: 1.3 !important;    text-align: center !important;    color: #000 !important;    margin-bottom: 2mm !important;  }
  .second-page .footer-site {     font-size: 8px !important;    text-align: center !important;    color: #000 !important;  }
  .legend {    display: none;  }
  .dini-cols {     display: grid;    grid-template-columns: 1fr 1fr;     gap: 1mm;   }
  
  /* Renk düzenlemeleri */
  .ders-gunu { background:#ffffff !important; }
  .haftasonu { background:#fff6f6 !important; }
  .resmi { background:#ffe6e6 !important; }
  .resmi_arife { background:#fff0f0 !important; }
  .dini { background:#e9f7ff !important; }
  .bayram { background:#dff6e5 !important; }
  .bayram_arife { background:#edfbf1 !important; }
  .ara-tatil, .yariyil-tatil { background:#fff7da !important; }
}

.footer-site {  text-align:center; margin-top:12px; font-size:10px; color:#555;}
.footer-site a { color:#555; text-decoration:none; }

.header-with-logo {  display: flex;  align-items: center;  justify-content: center;  gap: 20px;  margin: 8px 0;}
.header-logo {  max-height: 40px;}
h1 { text-align:center; margin: 0; }
/* Mobile responsiveness for header */
@media (max-width: 768px) {
  .header-with-logo {
    flex-direction: column;
    gap: 8px;
  }
  .header-logo {
    max-height: 30px;
  }
}

.sections4 { display:grid; grid-template-columns:1fr 1fr 2fr; gap:10px; margin-top:10px; }
.section {  border:1px solid #e1e1e1;  border-radius:10px;  padding:8px;  background:#fff;  font-size:11px;  transition: all 0.3s ease;  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}

.section:hover {  box-shadow: 0 3px 8px rgba(0,0,0,0.12);  transform: translateY(-1px);  border-color: #4A90E2;}
.section h3 { margin:0 0 4px 0; font-size:12px; text-align:center; }
.hlist li { margin:2px 0; }

/* Mobile responsiveness */
@media (max-width: 768px) {
  .calendar { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sections4 { grid-template-columns: 1fr; gap: 8px; }
  .legend { gap: 6px; }
  .toolbar { flex-wrap: wrap; }
  h1 { font-size: 16px; }
  h2 { font-size: 11px; }
}
@media (max-width: 480px) {
  .calendar { grid-template-columns: 1fr; gap: 10px; }
  .month-grid { gap: 1px; }
  .dow, .day { min-height: 28px; }
  .day { padding: 1px; }
  .day .mini { font-size: 8px; }
  .dini-cols { grid-template-columns: 1fr; }
}

/* Dini günler split 2 cols */
.dini-cols { display:grid; grid-template-columns:1fr 1fr; gap:6px; }

@media print {
  .sections4 { grid-template-columns:1fr 1fr 1fr; gap:1px; }
  .dini-cols { grid-template-columns: 1fr 1fr; gap: 2px; }
}
.highlight { outline:2px solid #d00; outline-offset:-2px; transition: outline 0.5s ease; }
/* Social Share Styles */
.social-share {  margin: 20px 0;  padding: 20px;  background: #f8f9fa;  border-radius: 12px;  text-align: center;  border: 1px solid #e9ecef;}
.social-share h4 {  margin: 0 0 15px 0;  font-size: 14px;  color: #495057;  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;  transition: all 0.3s ease;  color: white;  min-width: 100px;  justify-content: center;}
.share-btn:hover {  transform: translateY(-2px);  box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.share-btn.whatsapp {  background: #25D366;}
.share-btn.telegram {  background: #0088cc;}
.share-btn.facebook {  background: #1877f2;}
.share-btn.twitter {  background: #1da1f2;}
.share-btn.linkedin {  background: #0a66c2;}
.share-btn.email {  background: #6c757d;}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .month:hover, .section:hover, .toolbar button:hover, .day:hover, .share-btn:hover {
    transition: none;
    transform: none;
  }
}
/* Improved mobile responsiveness */
@media (max-width: 768px) {
  .share-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .share-btn {
    min-width: auto;
    font-size: 11px;
    padding: 6px 8px;
  }
  .social-share {
    margin: 15px 0;
    padding: 15px;
  }
}
@media (max-width: 480px) {
  .share-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .share-btn {
    font-size: 10px;
    padding: 5px 6px;
    gap: 4px;
  }
  .share-btn svg {
    width: 16px;
    height: 16px;
  }
}
/* Print styles - hide social share */
@media print {
  .social-share {
    display: none;
  }
}
/* Dini günler split 2 cols */

/* Atatürk Haftası için özel stiller */
.ataturk-haftasi {
  background: #f0f0f5; /* Açık mor veya gri tonu */
}

/* 10 Kasım özel stili */
.ataturk-day {
  background: #e6e6f2; /* Daha koyu mor/gri tonu */
  cursor: pointer;
  position: relative;
  overflow: visible;
}

.ataturk-day .ataturk-photo {
  display: none;
  position: absolute;
  top: -160px; /* Günün üstünde konumlandır */
  left: 50%;
  transform: translateX(-50%);
  width: 150px; /* Fotoğraf boyutu */
  height: 150px;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 20;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.ataturk-day:hover .ataturk-photo {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

/* Fotoğraf için animasyon */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Medya sorgulaması - küçülen ekranlarda fotoğrafı gizle */
@media (max-width: 768px), print {
  .ataturk-day .ataturk-photo {
    display: none !important;
  }
}

/* "Tıklayınız" yazısı için yeni stiller */
.ataturk-day .click-on-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
}

.ataturk-day:hover .click-on-image {
    opacity: 1;
    visibility: visible;
}