/* Genel Stil */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

/* Üst Bölüm (Top Bar) */
.top-bar {
    background-color: #2c3e50;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.logo {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fdbc58;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo img {
    width: 40px;
    vertical-align: middle;
    margin-right: 10px;
}

/* Mobilde logo boyutunu küçültme */
@media (max-width: 768px) {
    .logo {
        font-size: 1.2rem;  /* Daha küçük bir yazı boyutu */
    }

    .logo img {
        width: 30px; /* Mobilde daha küçük logo */
        margin-right: 8px; /* Biraz daha dar alan için */
    }
}

/* Kullanıcı Bilgisi ve Çıkış Butonu */
.user-info {
    color: white;
    font-size: 0.8rem;
}

.user-info a {
    color: white; /* Çıkış butonunun rengi her zaman beyaz olacak */
    text-decoration: none;
    font-weight: bold;
    margin-left: 15px;
}

.user-info a:hover {
    color: #f39c12; /* Hover efekti */

}
@media (max-width: 768px) {
    .user-info {
        justify-content: flex-start; /* Mobilde sola yasla */
        font-size: 0.9rem; /* Yazı boyutunu biraz büyüt */
        margin-left: 10px; /* Sol boşluk bırak */
    }

    .user-info a {
        margin-right: 5px; /* Linkler arasındaki boşluğu azalt */
    }
}
/* Menü Barı */
.menu-bar {
    background-color: #34495e;
    padding: 9px 40px;
    display: flex;
    justify-content: center;
}

.menu-bar a {
    color: white;
    text-decoration: none;
    padding: 9px 20px;
    font-size: 1rem;
    text-align: center;
}

.menu-bar a:hover {
    background-color: #2980b9;
    border-radius: 5px;
}

/* Ana Container */
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #2C3E50;
}

/* Topics */
.topics-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* Küçük Kartlar (lesson.php ve homework.php için) */
.small-topics-container {
    justify-content: center; /* Yatayda ortalama */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Daha küçük kartlar */
    gap: 15px;
    padding: 15px 0;
}

.topic-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    text-align: center;
    position: relative;
}

.topic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.topic-card img {
    width: 100%; /* Resmi %100 genişlikte yap */
    height: 140px; /* Sabit yükseklik ver */
    object-fit: cover; /* Resmin kesilmesini önler ve kutuya uygun şekilde yerleşmesini sağlar */
}

.topic-card h2 {
    font-size: 1.4rem;
    color: #2C3E50;
    margin: 10px 0;
    font-family: 'Lora', serif;
}

.topic-card p {
    font-size: 0.9rem;
    color: #7f8c8d;
    padding: 0 10px;
    margin-bottom: 15px;
}

.topic-card a {
    display: inline-block;
    padding: 10px 15px;
    background: #2980b9;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-bottom: 20px;
}

.topic-card a:hover {
    background: #21618c;
}

/* Tablo: Derse Git Butonları */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

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

table th {
    background-color: #34495e;
    color: white;
    font-size: 1.2rem;
}

table td {
    background-color: #fff;
    color: #2c3e50;
    font-size: 1rem;
}

/* Satırların rengini değiştirme (Alternatif renkler) */
table tr:nth-child(odd) td {
    background-color: #ecf0f1; /* Açık gri */
}

table tr:nth-child(even) td {
    background-color: #f9e79f; /* Sarımsı */
}

/* Butonlar için özel stil */
.btn-link {
    padding: 8px 16px;
    background-color: #2980b9;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
}

.btn-link:hover {
    background-color: #21618c;
}

/* Mobil Uyumlu Tasarım */
@media (max-width: 768px) {
    /* Menu Barı */
    .menu-bar {
        flex-direction: row;
 justify-content: space-evenly; 
    padding: 6px 4px;               /* sağ/sol eşit, küçük boşluk */
    }

    .menu-bar a {
        padding: 6px 4px;
        font-size: 0.9rem;
    }

    /* Topics: 2 şerli kartlar */
    .topics-container {
        grid-template-columns: repeat(2, 1fr); /* 2 şerli kartlar */
    }

    .small-topics-container {
        grid-template-columns: repeat(2, 1fr); /* 2 şerli küçük kartlar */
        gap: 10px;
    }

    /* Mobilde logo boyutunu küçültme */
    .logo {
        font-size: 1.2rem;
    }

    .logo img {
        width: 30px; /* Mobilde daha küçük logo */
        margin-right: 8px;
    }

    /* Tabloyu mobilde uygun şekilde gösterme */
    table {
        font-size: 0.8rem;
width: 100%; 
    }

    table th, table td {
        padding: 4px;
       
        text-align: center;
    }

    table thead {
           }

    table tr {
        margin-bottom: 4px;
     
        border: 1px solid #ddd;
    }

    table td {
        background: #fff;
        color: #2c3e50;
        font-size: 0.8rem;
        border-bottom: 1px solid #ddd;
      
        
    }

    table td:before {
        content: attr(data-label);
       
        font-weight: bold;
        color: #34495e;
    }
}

/* Telefon: ilk 5 üstte, diğer 5 altta */
@media (max-width: 768px) {
  .menu-bar {
    flex-wrap: wrap;      /* 2 satıra izin ver */
    justify-content: center; /* Satırları ortala */
    gap: 0;               /* 5×20% tam sığsın */
  }
  .menu-bar a {
    box-sizing: border-box; /* padding 20%'nin içinde kalsın */
    flex: 0 0 20%;          /* satırda 5 öğe */
  }
}















/* =========================================================
   im_ Pro Header + Pro Nav (ek bölüm) — mevcut CSS'lere dokunmaz
   ========================================================= */

.im_hdr {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #131921; /* Amazon esintisi */
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.im_hdr__row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
}

.im_hdr__brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.im_hdr__logo{
  display:block;
  height:auto;
  width: 190px;           /* desktop */
  max-width: 52vw;        /* küçük ekranlarda taşma engeli */
}

.im_hdr__spacer{ flex:1; }

/* Hamburger (tablet/telefon) */
.im_hdr__burger{
  display:none;
  width:44px; height:40px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  border-radius:10px;
  cursor:pointer;
  padding:8px 10px;
}
.im_hdr__burger span{
  display:block;
  height:2px;
  margin:5px 0;
  background:#fff;
  opacity:.9;
  border-radius:2px;
}

/* Account */
.im_acc{ position:relative; }
.im_acc__btn{
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  border-radius:12px;
  padding:7px 10px;
  cursor:pointer;
  display:grid;
  line-height:1.1;
  min-width: 160px;
}
.im_acc__hello{ font-size:11px; opacity:.85; text-align:left; }
.im_acc__name{ font-size:13px; font-weight:700; text-align:left; }

.im_acc__menu{
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 230px;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  padding:8px;
}
.im_acc__menu a{
  display:block;
  text-decoration:none;
  color:#111;
  padding:10px 10px;
  border-radius:10px;
  font-size:14px;
}
.im_acc__menu a:hover{ background:#f3f4f6; }
.im_acc__sep{ height:1px; background:#eee; margin:6px 0; }
.im_acc__logout{ color:#b42318; font-weight:700; }

.im_acc.im_is_open .im_acc__menu{ display:block; }

/* Nav bar (Amazon alt bar hissi) */
.im_nav{
  background:#232f3e;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(0,0,0,.10);
  padding: 6px 10px;
  display:flex;
  justify-content:center;
}

.im_nav .im_nav__link,
.im_nav a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  padding:8px 10px;
  border-radius:10px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.im_nav .im_nav__link:hover,
.im_nav a:hover{
  background: rgba(255,255,255,.10);
}

/* ======================
   Responsive davranış
   ====================== */

/* Tablet */
@media (max-width: 900px){
  .im_hdr__logo{ width: 160px; }
  .im_hdr__burger{ display:inline-block; }
}

/* Telefon */
@media (max-width: 520px){
  .im_hdr__logo{ width: 140px; }
  .im_acc__btn{ min-width: 140px; }
}

/* Mobil menü drawer (imNav üzerinde toggle) */
@media (max-width: 900px){
  /* im_nav normalde gizli (hamburger ile açılır) */
  #imNav.im_nav{
    display:none;
    position: fixed;
    left: 10px;
    right: 10px;
    top: 68px;               /* header yüksekliği civarı */
    z-index: 1200;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:6px;
    border-radius:14px;
    box-shadow:0 14px 40px rgba(0,0,0,.22);
  }
  #imNav.im_is_open{ display:flex; }

  /* linkler daha “buton” gibi */
  #imNav a, #imNav .im_nav__link{
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
  }
}






/* ===== Mobil drawer: 2 sütun (telefon), 3 sütun (geniş telefon) ===== */
@media (max-width: 900px) {

  /* Drawer açılınca: grid yap */
  #imNav.im_nav.im_is_open{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* telefonda 2 */
    gap: 8px !important;

    padding: 10px !important;
    max-height: calc(100vh - 90px) !important;
    overflow: auto !important;

    background: #232f3e !important;
  }

  /* Linkler: kutu gibi */
  #imNav.im_nav.im_is_open a,
  #imNav.im_nav.im_is_open .im_nav__link{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;

    padding: 12px 10px !important;
    border-radius: 12px !important;

    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }
}

/* Biraz daha geniş telefonlarda 3 sütun */
@media (min-width: 520px) and (max-width: 900px){
  #imNav.im_nav.im_is_open{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobilde menü kapalıyken kesin gizli kalsın */
@media (max-width: 900px){
  #imNav.im_nav:not(.im_is_open){
    display: none !important;
  }
}



/* ===== im_ Menü Çubuğu – Premium Arka Plan ===== */
.im_nav{
  background: linear-gradient(180deg, #1b2638 0%, #111827 100%) !important;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.35);
}
/* Menü linkleri – cam buton hissi */
.im_nav a,
.im_nav .im_nav__link{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}

/* Hover */
.im_nav a:hover,
.im_nav .im_nav__link:hover{
  background: rgba(255,255,255,.14);
}
@media (max-width: 900px){
  #imNav.im_nav.im_is_open{
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    border-radius: 18px;
  }
}



/* =======================
   LESSON.PHP – Pro görünüm (sadece bu sayfa)
   ======================= */

.im_lesson_page .page-header{
  margin: 12px 0 22px !important;
}
.im_lesson_page .page-header h1{
  letter-spacing: .2px;
}
.im_lesson_page .subtitle{
  opacity: .85;
}

/* İki kolon: PC'de daha dengeli, mobilde doğal */
.im_lesson_page .topics-two{
  gap: 18px !important;
}

/* Kolon kutuları: daha “kurumsal” derinlik */
.im_lesson_page .topics-column{
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
  border-width: 2px !important;
}

/* Kartlar: Amazon/Udemy hissi (daha temiz) */
.im_lesson_page .topic-card{
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10) !important; /* style.css’deki ağır gölgeyi ezer */
  border: 1px solid rgba(0,0,0,.08) !important;
}
.im_lesson_page .topic-card:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.14) !important;
}

/* Kart görselleri: daha premium görünür */
.im_lesson_page .topic-card img{
  height: 150px !important;
  object-fit: cover !important;
}

/* lesson.php kart başlıkları h3; style.css daha çok h2’ye göre ayarlı */
.im_lesson_page .topic-card h3{
  font-size: 16px !important;
  margin: 10px 0 6px !important;
  color: #111827 !important;
}
.im_lesson_page .topic-card p{
  font-size: 13px !important;
  margin: 0 12px 10px !important;
  color: #4b5563 !important;
}

/* Butonlar: daha “UI button” gibi */
.im_lesson_page .topic-btn{
  border-radius: 12px !important;          /* 999px yerine daha modern */
  padding: 10px 14px !important;
  box-shadow: none !important;
}

/* Mobil: kartlar 2 sütun kalsın ama daha sıkı */
@media (max-width: 768px){
  .im_lesson_page .topic-list{
    padding: 12px !important;
    gap: 10px !important;
  }
  .im_lesson_page .topic-card img{
    height: 110px !important;
  }
  .im_lesson_page .topic-card p{
    display: none !important; /* mobilde kartları ferahlatır (istersen kaldırırız) */
  }
}





/* =======================
   LESSON.PHP – Pro görünüm (sadece bu sayfa)
   ======================= */

.im_lesson_page .page-header{
  margin: 12px 0 22px !important;
}
.im_lesson_page .page-header h1{
  letter-spacing: .2px;
}
.im_lesson_page .subtitle{
  opacity: .85;
}

/* İki kolon: PC'de daha dengeli, mobilde doğal */
.im_lesson_page .topics-two{
  gap: 18px !important;
}

/* Kolon kutuları: daha “kurumsal” derinlik */
.im_lesson_page .topics-column{
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
  border-width: 2px !important;
}

/* Kartlar: Amazon/Udemy hissi (daha temiz) */
.im_lesson_page .topic-card{
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10) !important; /* style.css’deki ağır gölgeyi ezer */
  border: 1px solid rgba(0,0,0,.08) !important;
}
.im_lesson_page .topic-card:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.14) !important;
}

/* Kart görselleri: daha premium görünür */
.im_lesson_page .topic-card img{
  height: 150px !important;
  object-fit: cover !important;
}

/* lesson.php kart başlıkları h3; style.css daha çok h2’ye göre ayarlı */
.im_lesson_page .topic-card h3{
  font-size: 16px !important;
  margin: 10px 0 6px !important;
  color: #111827 !important;
}
.im_lesson_page .topic-card p{
  font-size: 13px !important;
  margin: 0 12px 10px !important;
  color: #4b5563 !important;
}

/* Butonlar: daha “UI button” gibi */
.im_lesson_page .topic-btn{
  border-radius: 12px !important;          /* 999px yerine daha modern */
  padding: 10px 14px !important;
  box-shadow: none !important;
}

/* Mobil: kartlar 2 sütun kalsın ama daha sıkı */
@media (max-width: 768px){
  .im_lesson_page .topic-list{
    padding: 12px !important;
    gap: 10px !important;
  }
  .im_lesson_page .topic-card img{
    height: 110px !important;
  }
  .im_lesson_page .topic-card p{
    display: none !important; /* mobilde kartları ferahlatır (istersen kaldırırız) */
  }
}

.im_user_navlink{display:inline-flex;align-items:center;gap:8px}
.im_user_badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 6px;border-radius:999px;
  background:#e53935;color:#fff;font-size:12px;font-weight:900;line-height:1;
}
.im_user_badge{
  background: linear-gradient(180deg,#ff3b30 0%, #d61200 100%);
}


/* ================================
   OKULUM butonu – SADECE BU MAVİ
   ================================ */

/* Genel menü linkleri OKULUM'u ezemesin */
.menu-bar > a.im_menu_school{
  background: #1b4f8a !important; /* okul portal mavisi */
  color: #ffffff !important;
  font-weight: 900;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  opacity: 1;
}

/* Hover */
.menu-bar > a.im_menu_school:hover{
  background: #1f5ea6 !important;
  color: #ffffff !important;
}

/* Alt çizgi efektini KAPAT (sadece OKULUM için) */
.menu-bar > a.im_menu_school::after{
  display: none !important;
}



/* =========================
   PRO TABLO – AMAZON STYLE
   ========================= */

table{
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Başlık */
table thead th{
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  padding: 14px 12px;
  border-bottom: 2px solid rgba(255,255,255,.12);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Hücreler */
table tbody td{
  padding: 14px 12px;
  font-size: 14px;
  color: #1f2937;
  border-bottom: 1px solid #e5e7eb;
}

/* 🔥 SATIR TON FARKI (BELİRGİN) */
table tbody tr:nth-child(odd){
  background: #f8fafc;   /* çok açık gri */
}

table tbody tr:nth-child(even){
  background: #eef2f7;   /* belirgin koyu gri */
}

/* Hover – canlı ama abartısız */
table tbody tr:hover{
  background: linear-gradient(
    90deg,
    #e0f2fe 0%,
    #f0f9ff 100%
  );
}

/* İlk sütun biraz güçlü dursun */
table tbody td:first-child{
  font-weight: 700;
  color: #111827;
}

/* Son satır çizgisini temizle */
table tbody tr:last-child td{
  border-bottom: none;
}


/* =========================
   PRO TABLO – AMAZON STYLE
   ========================= */

table{
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Başlık */
table thead th{
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  padding: 14px 12px;
  border-bottom: 2px solid rgba(255,255,255,.12);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Hücreler */
table tbody td{
  padding: 14px 12px;
  font-size: 14px;
  color: #1f2937;
  border-bottom: 1px solid #e5e7eb;
}

/* 🔥 SATIR TON FARKI (BELİRGİN) */
table tbody tr:nth-child(odd){
  background: #f8fafc;   /* çok açık gri */
}

table tbody tr:nth-child(even){
  background: #eef2f7;   /* belirgin koyu gri */
}

/* Hover – canlı ama abartısız */
table tbody tr:hover{
  background: linear-gradient(
    90deg,
    #e0f2fe 0%,
    #f0f9ff 100%
  );
}

/* İlk sütun biraz güçlü dursun */
table tbody td:first-child{
  font-weight: 700;
  color: #111827;
}

/* Son satır çizgisini temizle */
table tbody tr:last-child td{
  border-bottom: none;
}

@media(max-width:768px){
  table{
    font-size: 13px;
  }

  table thead{
    display:none;
  }

  table tbody tr{
    display:block;
    margin-bottom:14px;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
  }

  table tbody td{
    display:flex;
    justify-content:space-between;
    padding:10px 12px;
    border-bottom:1px solid #e5e7eb;
  }

  table tbody td:last-child{
    border-bottom:none;
  }

  table tbody td::before{
    content: attr(data-label);
    font-weight:800;
    color:#374151;
  }
}


/* === Zebra satırlar: daha koyu ton farkı === */
table tbody tr:nth-child(odd){
  background: #f1f5f9 !important;   /* açık ama belirgin */
}

table tbody tr:nth-child(even){
  background: #e2e8f0 !important;   /* 🔥 bir tık daha koyu */
}
/* ================================
   PRO TABLE – Amazon Style
   ================================ */

table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0;
  background:#ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  font-size: 14px;
}

/* === TABLE HEADER === */
table thead th{
  background: linear-gradient(180deg,#1f2937 0%, #111827 100%);
  color:#ffffff;
  padding:14px 12px;
  text-align:left;
  font-size:13px;
  font-weight:800;
  letter-spacing:.3px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}

/* === TABLE BODY CELLS === */
table tbody td{
  padding:12px 12px;
  color:#111827;
  border-bottom:1px solid #d1d5db;
  vertical-align: middle;
}

/* === ZEBRA SATIRLAR (DAHA KOYU – NET) === */
table tbody tr:nth-child(odd){
  background:#f1f5f9;   /* açık ton */
}

table tbody tr:nth-child(even){
  background:#e2e8f0;   /* 🔥 daha koyu ton */
}

/* === HOVER === */
table tbody tr:hover{
  background:#cbd5e1;
  transition: background .15s ease;
}

/* === SON SATIR ALT ÇİZGİ KAPAT === */
table tbody tr:last-child td{
  border-bottom:none;
}

/* === BUTON / LINK TABLE İÇİ === */
table a{
  color:#2563eb;
  font-weight:700;
  text-decoration:none;
}
table a:hover{
  text-decoration:underline;
}

/* === DURUM ROZETLERİ (opsiyonel ama çok yakışır) === */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-size:12px;
  font-weight:800;
  border-radius:999px;
  line-height:1;
  white-space:nowrap;
}

.badge.done{
  background:#dcfce7;
  color:#166534;
}

.badge.pending{
  background:#fee2e2;
  color:#991b1b;
}

.badge.wait{
  background:#fef3c7;
  color:#92400e;
}












/* =========================================================
   PRO TABLE (Amazon / Dashboard) — style.css sonuna ekle
   ========================================================= */

:root{
  --im_tbl_bg: #ffffff;
  --im_tbl_border: #e5e7eb;
  --im_tbl_text: #111827;
  --im_tbl_muted: #6b7280;

  /* Zebra (daha belirgin) */
  --im_tbl_row_odd: #eef2f7;
  --im_tbl_row_even:#dfe7f2;

  /* Header */
  --im_tbl_head_1: #1f2937;
  --im_tbl_head_2: #111827;

  /* Hover */
  --im_tbl_hover: #cbd5e1;

  /* Link */
  --im_tbl_link: #2563eb;
}

/* Base table */
table{
  width:100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--im_tbl_bg);
  color: var(--im_tbl_text);
  border: 1px solid var(--im_tbl_border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  margin: 16px 0;
}

/* Header */
table thead th{
  background: linear-gradient(180deg, var(--im_tbl_head_1) 0%, var(--im_tbl_head_2) 100%);
  color:#fff;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}

/* Cells */
table tbody td{
  padding: 13px 12px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #d1d5db;
  vertical-align: middle;
}

/* Zebra rows (daha koyu fark) */
table tbody tr:nth-child(odd){
  background: var(--im_tbl_row_odd) !important;
}
table tbody tr:nth-child(even){
  background: var(--im_tbl_row_even) !important;
}

/* Hover */
table tbody tr:hover{
  background: var(--im_tbl_hover) !important;
  transition: background .15s ease;
}

/* Remove last border */
table tbody tr:last-child td{
  border-bottom: none;
}

/* Links inside table */
table a{
  color: var(--im_tbl_link);
  font-weight: 900;
  text-decoration: none;
}
table a:hover{
  text-decoration: underline;
}

/* Buttons inside table (senin .btn-link varsa daha pro görünür) */
table .btn-link,
table a.btn-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.18);
  background: #111827;
  color: #fff !important;
  font-weight: 900;
  text-decoration: none !important;
}
table .btn-link:hover,
table a.btn-link:hover{
  background:#0b1220;
}

/* Optional badges for status (kullanırsan) */
.im_badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.08);
  white-space: nowrap;
}
.im_badge.ok{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.im_badge.no{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.im_badge.wait{ background:#fef3c7; color:#92400e; border-color:#fde68a; }

/* =========================================================
   MOBILE TABLE -> Card layout
   (Sadece data-label kullanan tablolar için mükemmel)
   ========================================================= */
@media (max-width:768px){
  table{
    border-radius: 14px;
  }

  table thead{ display:none; }

  table tbody tr{
    display:block;
    margin-bottom: 12px;
    border-radius: 14px;
    overflow:hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,.10);
    border: 1px solid var(--im_tbl_border);
  }

  table tbody td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 10px 12px;
    border-bottom: 1px solid #cbd5e1;
    font-size: 13px;
  }

  table tbody td:last-child{
    border-bottom:none;
  }

  table tbody td::before{
    content: attr(data-label);
    font-weight: 900;
    color: var(--im_tbl_muted);
    margin-right: 10px;
    white-space: nowrap;
  }
}
table tr:nth-child(even) td{
  background: inherit !important;
}