/* ✅ Genel Stiller */


/* ✅ Excel Veri Giriş Alanı */
#oso_excel_input {
    width: 100%;
    height: 180px;
    font-size: 14px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: none;
    background: #fff;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ✅ Gönderme Butonu */
#oso_excel_gonder {
    background: linear-gradient(135deg, #0073aa, #0099cc);
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s ease-in-out;
}

#oso_excel_gonder:hover {
    background: linear-gradient(135deg, #005a87, #0073aa);
}

/* ✅ Bölüm Kartları Konteyneri */
.oso-bolum-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

/* ✅ Kart Stili */
.oso-bolum-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 120px;
    background: #ECF7FB;
    color: #0073aa;
    font-size: 16px;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    text-align: center;
    text-decoration: none;
    padding: 15px;
    border: 2px solid #0073aa;
    cursor: pointer;
}

/* ✅ Hover Efekti */
.oso-bolum-btn:hover {
    background: #0073aa;
    color: white;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 115, 170, 0.3);
}

/* ✅ Mobil Uyumlu Tasarım */
@media (max-width: 600px) {
    .oso-bolum-btn {
        width: 100px;
        height: 100 px;
        font-size: 13px;
        padding: 7px;
    }
}


/* ✅ Popup İçindeki Butonların Bulanıklık Yapmasını Engelleyen Optimizasyon */
.oso-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease-in-out;
    text-align: center;
    overflow-y: auto;
    max-height: 80vh;
    
    /* ✅ Bulanıklık Sorununu Önleyen CSS */
    will-change: opacity, transform;
    transform-origin: center;
    backface-visibility: hidden;
}

/* ✅ Popup İçindeki Scroll Bar */
.oso-popup::-webkit-scrollbar {
    width: 18px;
}

.oso-popup::-webkit-scrollbar-thumb {
    background-color: rgba(0, 115, 170, 0.8);
    border-radius: 4px;
}

.oso-popup::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

/* ✅ Kapatma Butonu */
.oso-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 25px;
    cursor: pointer;
    color: #ff2d2d;
    transition: color 0.3s;
}

.oso-close:hover {
    color: #d60000;
}

/* ✅ Koyu Arkaplan (Overlay) */
.oso-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    
    display: none;
    z-index: 999;
}

/* ✅ Hedef Butonları */
.oso-hedef-btn {
    display: block;
    margin: 6px auto;
    padding: 12px 18px;
    width: 90%;
    background: #d3ffeb ;
    color: #213242;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    
    /* 📌 BULANIKLIK SORUNUNU ENGELLEYEN OPTİMİZASYON */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: background 0.3s ease-in-out;
}

.oso-hedef-btn:hover {
    background: #a3fcd3 ;
}



/* ✅ Öğrenci Listesi */
.oso-admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.oso-admin-table th,
.oso-admin-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.oso-admin-table th {
    background: #0073aa;
    color: white;
    font-weight: bold;
}

.oso-admin-table tr:nth-child(even) {
    background: #f9f9f9;
}

/* ✅ Mobil Uyum */
@media (max-width: 500px) {
    .oso-popup {
        width: 95%;
        max-width: 350px;
    }

    .oso-admin-table th,
    .oso-admin-table td {
        padding: 10px;
        font-size: 14px;
    }

    .oso-hedef-btn {
        font-size: 14px;
    }
}

/* ✅ Parola Girişi Sayfası */
.oso-parola-container {
    display: flex;
    justify-content: center;
    align-items: center;

}

.oso-parola-box {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 350px;
}

.oso-parola-box h2 {
    font-size: 22px;
    color: #0073aa;
    margin-bottom: 15px;
}

.oso-parola-box input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.3s ease-in-out;
}

.oso-parola-box input:focus {
    border-color: #0073aa;
}

.oso-parola-box button {
    width: 100%;
    padding: 10px;
    background: #0073aa;
    color: white;
    border: none;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.3s;
}

.oso-parola-box button:hover {
    background: #005a87;
}




#iframePopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 85vh;
    background-color: #fff;
    z-index: 9999;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border: 1px solid #ddd;
}

#popupHeader {
    background-color: #393e6c;
    color: white;
    padding: 10px 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#popupHeader span {
    flex-grow: 1;
}

#popupButtons {
    display: flex;
    gap: 10px;
    align-items: center;
}

#popupButtons button {
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s ease;
}

/* Yazıya Git (sarı) */
#popupOpenInNewTab {
    background-color: #ffd700;
    color: #000;
}
#popupOpenInNewTab:hover {
    background-color: #ffea8a;
}

/* Kapat (kırmızı) */
#popupClose {
    background-color: crimson;
    color: #fff;
}
#popupClose:hover {
    background-color: #e60026;
}

#popupIframe {
    width: 100%;
    height: calc(100% - 50px);
    border: none;
}



/* DERS İÇERİKLERİ   */
.ders-btn {
    background: linear-gradient(135deg, #4a90e2, #357ABD);
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: 0.3s ease all;
}
.ders-btn:hover {
    background: linear-gradient(135deg, #2d6f9f, #1a4f7a);
    transform: scale(1.02);
}

.oso-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.oso-modal-popup {
    background: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 700px;
    width: 89%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: fadeInUp 0.3s ease-out;
}

.oso-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
}
#ders-icerikleri-goster {
    width: 100%;
    height: 55px;
    background: linear-gradient(135deg, #f5f7fa, #e4ecf5);
    color: #2c3e50;
    padding: 16px 24px; /* önceki: 12px 20px */
    border: 1px solid #d0d7e2;
    border-radius: 8px;
    font-size: 18px; /* önceki: 16px */
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

#ders-icerikleri-goster:hover {
    background: linear-gradient(135deg, #e8f0fa, #d4e3f1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.section-box {
    background: #f9fbfc;
    border: 1px solid #dce4ec;
    border-radius: 10px;
    padding: 25px 30px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
/* 🎨 Hafif mavi ton - Ders içerikleri */
.ders-section {
    background: #f0f5fa;
    border: 2px solid #144678;
}

/* 🎨 Hafif yeşilimsi ton - Modül alanı */
.modul-section {
    background: #f4f9f4;
    border: 2px solid #098909;
}

.section-box h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #34495e;
}

.section-desc {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}
.toggle-section-btn {
    width: 100%;
    height: 55px;
    background: linear-gradient(135deg, #81f0a1, #e4ecf5);
    color: #2c3e50;
    padding: 16px 24px; /* önceki: 12px 20px */
    border: 1px solid #d0d7e2;
    border-radius: 8px;
    font-size: 18px; /* önceki: 16px */
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.toggle-section-btn:hover {
    background: #2980b9;
}

@media (max-width: 600px) {
    #ders-icerikleri-goster,
    .toggle-section-btn {
        font-size: 15px;
        padding: 10px 16px;
        height: auto;
        line-height: 1.4;
        font-weight: 500;
        white-space: normal;
        word-break: break-word;
    }

  
}
#oso-duzenle-modal {
    display: none;
    position: fixed;
       top: calc(5% + 32px);
    left: calc(50% + 80px); /* 160px / 2 = 80px kaydırır */
   
    transform: translateX(-50%);
    background: #fff;
    padding: 30px;
    border: 1px solid #ccc;
  z-index: 999999 !important;
    max-width: 1100px; /* genişliği artırdık */
    width: 90%;
    max-height: 90vh;
    overflow: hidden; /* dış scroll kapalı */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border-radius: 8px;
}
#oso-duzenle-modal form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    overflow-y: auto;
    max-height: 75vh; /* sadece içeriğe scroll */
    padding-right: 10px; /* scroll bar için boşluk */
}
.ogrenci-form-grup {
    flex: 0 0 calc(20% - 20px); /* 5 sütun */
    display: flex;
    flex-direction: column;
}
.ogrenci-form-grup label {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 4px;
}
.ogrenci-form-grup input {
    padding: 6px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}
#oso-duzenle-modal h3 {
    flex-basis: 100%;
    margin: 20px 0 5px;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 3px;
}

.duzenle-butonlar-top {
    margin: 15px 0 25px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
#buyuk-input-kutu {
    border: 1px solid #ccc;
    background: #fefefe;
    animation: zoomIn 0.2s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.8) translate(-50%, -50%); opacity: 0; }
    to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
}

#bastan-basla {
    background-color: #f2f2f2;
    border: 1px solid #bbb;
    padding: 8px 14px;
    font-size: 14px;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#bastan-basla:hover {
    background-color: #e0e0e0;
    color: #000;
    border-color: #999;
}


#dk-ders-kontrol-alani {
    max-width: 600px;
    margin: 30px auto;
    font-family: "Segoe UI", sans-serif;
}

#dk-ogrenci-ara {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 4px;
}

#dk-ogrenci-sonuclar {
    margin-top: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.dk-ogrenci-sec {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.dk-ogrenci-sec:hover {
    background-color: #f0f0f0;
}

#dk-ders-icerikleri {
    margin-top: 25px;
    padding: 20px;
    background: #fdfdfd;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.dk-ders-icerik-kutu {
    line-height: 1.6;
}

.dk-ders-icerik-kutu strong {
    display: inline-block;
    margin-top: 10px;
    color: #444;
}

.ders-linko-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #00b894, #0984e3);
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    text-decoration: none;
}

.ders-linko-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #00cec9, #74b9ff);
}

.ders-linko-btn svg {
    width: 18px;
    height: 18px;
    fill: white;
}

@media (max-width: 600px) {
    .ders-linko-btn {
        width: 100%;
        justify-content: center;
        font-size: 14px;
        padding: 12px;
    }
}
/* =========================
   OSO Admin - Modern Layout
========================= */
.oso-admin { max-width: 1600px; }

.oso-admin-header{
  display:flex; gap:16px; align-items:flex-end; justify-content:space-between;
  margin: 10px 0 14px 0;
}
.oso-h1{ margin:0; padding:0; font-size:24px; line-height:1.2; }
.oso-sub{ margin-top:6px; color:#6b7280; font-size:13px; }
.oso-admin-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.oso-stats{
  display:grid; grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:12px; margin: 10px 0 14px 0;
}
.oso-stat-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:14px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.oso-stat-label{ color:#6b7280; font-size:12px; }
.oso-stat-value{ font-size:26px; font-weight:700; margin-top:6px; }
.oso-stat-desc{ margin-top:6px; color:#6b7280; font-size:12px; }
.oso-stat-card.oso-warn{ border-color:#f1c0c0; background: #fff7f7; }
.oso-stat-card.oso-info{ border-color:#cfe6ff; background: #f4f9ff; }

.oso-tabs{
  display:flex; gap:8px; margin: 8px 0 12px 0;
}
.oso-tab-btn{
  border:1px solid #e5e7eb; background:#fff; border-radius:999px;
  padding:8px 12px; cursor:pointer; font-weight:600;
}
.oso-tab-btn.is-active{
  border-color:#2271b1; box-shadow: 0 0 0 2px rgba(34,113,177,.12);
}

.oso-tab-panel{ display:none; }
.oso-tab-panel.is-active{ display:block; }

.oso-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:14px; box-shadow: 0 2px 12px rgba(0,0,0,.05);
  margin-bottom:14px;
}
.oso-card-head{
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  margin-bottom:10px;
}
.oso-card-title{ font-size:15px; font-weight:700; margin:0; }
.oso-card-sub{ color:#6b7280; font-size:12px; margin-top:4px; }

.oso-toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.oso-search{
  display:flex; align-items:center; gap:8px;
  border:1px solid #e5e7eb; background:#bdffce; border-radius:10px;
  padding:6px 10px;
}
.oso-search input{
  border:none; outline:none; min-width:260px; box-shadow:none;
}
.oso-search .dashicons{ color:#6b7280; }

.oso-toggle{
  display:flex; align-items:center; gap:8px;
  border:1px solid #e5e7eb; background:#f9fafb; border-radius:10px;
  padding:6px 10px;
}
.oso-inline-note{
  display:flex; gap:10px; align-items:flex-start;
  background:#fff7f7; border:1px solid #f1c0c0; color:#7f1d1d;
  border-radius:12px; padding:10px 12px; margin: 10px 0 12px 0;
}

.oso-table-wrap{
  border:1px solid #e5e7eb; border-radius:12px;
  overflow:auto; max-height: 620px;
}
.oso-admin-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
.oso-admin-table th{
  position: sticky; top:0;
  background:#0b3a61; color:#fff;
  padding:12px; text-align:left; z-index:2;
}
.oso-admin-table td{
  padding:12px; border-bottom:1px solid #eef2f7;
}
.oso-admin-table tr:nth-child(even) td{ background:#fbfdff; }

.oso-row-missing td{
  background:#fff0f0 !important;
  border-bottom-color:#f3caca;
}

.oso-actions{
  display:flex; gap:8px; align-items:center;
}

.oso-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.oso-empty{
  display:flex; gap:10px; align-items:center;
  padding:14px;
  background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px;
}

/*
  Öğrenci düzenleme modalı (oso-duzenle-modal)
  Sabit "+80px" kaydırma kaldırıldı: modal artık viewport içinde kalır.
*/
#oso-duzenle-modal{
  display:none;
  position:fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background:#fff;
  padding: 18px;
  border:1px solid #e5e7eb;
  z-index:999999 !important;
  box-sizing:border-box;

  width: min(1100px, calc(100vw - 40px));
  max-height: calc(100vh - 90px);

  overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  border-radius:14px;
}

/* İç form: responsive grid */
#oso-duzenle-modal form{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  overflow-y:auto;
  max-height: calc(100vh - 180px);
  padding-right: 8px;
  box-sizing:border-box;
}

#oso-duzenle-modal h3{
  grid-column: 1 / -1;
}

.ogrenci-form-grup{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

@media (max-width: 782px){
  #oso-duzenle-modal{
    top: 48px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 70px);
    padding: 14px;
  }
  #oso-duzenle-modal form{
    grid-template-columns: 1fr;
    max-height: calc(100vh - 150px);
  }
}