/* ==========================================================
   KUŞ RESİM MODALI – MODERN / ŞIK TASARIM (AÇIK TON)
   Kapsam: SADECE .kusresim-modal içinde çalışır
   Amaç:
   - Modal görünümü modernleştirmek
   - Galeri kartlarını grid ile düzenlemek
   - Uploader alanı + galeri görünümünü daha okunur yapmak
   - Lightbox (büyük resim) görünümünü şık hale getirmek
   ========================================================== */


/* ==========================================================
   1) GLOBAL AYARLAR / CSS VARIABLE
   - Galeri kolon sayısı, thumb yüksekliği ve padding tek yerden yönetilir
   ========================================================== */
.kusresim-modal{
  --kr-cols: 4;           /* Galeride kaç kolon gösterilecek */
  --kr-thumb-h: 190px;    /* Küçük resim yüksekliği (thumbnail) */
  --kr-thumb-pad: 6px;    /* Thumbnail çevresi iç padding */
}


/* ==========================================================
   2) MODAL GENİŞLİK ve RESPONSIVE KIRILIMLAR
   - Büyük ekranda geniş modal
   - Küçüldükçe kolon sayısı ve modal genişliği ayarlanır
   ========================================================== */
.kusresim-modal .modal-dialog{
  max-width: 980px;            /* Modal maksimum genişlik */
}

@media (max-width: 1200px){
  .kusresim-modal .modal-dialog{ max-width: 900px; }
}
@media (max-width: 992px){
  .kusresim-modal .modal-dialog{ max-width: 95vw; margin: 12px auto; }
  .kusresim-modal{ --kr-cols: 3; } /* Tablet: 3 kolon */
}
@media (max-width: 576px){
  .kusresim-modal{ --kr-cols: 2; } /* Mobil: 2 kolon */
}


/* ==========================================================
   3) MODAL CONTENT (GENEL KASA)
   - Arkaplan, yazı rengi, radius, gölge
   ========================================================== */
.kusresim-modal .modal-content{
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:#273244;            /* Açık gri-mavi koyu tema */
  color:#f1f5f9;                 /* Yazı okunurluğu */
  box-shadow:0 20px 55px rgba(0,0,0,.40);
}


/* ==========================================================
   4) HEADER (BAŞLIK ALANI)
   - Gradient header
   - Başlık tipi ve close butonu
   ========================================================== */
.kusresim-modal .modal-header{
  border:0;
  padding:14px 18px;
  background:linear-gradient(135deg, rgba(59,130,246,.55), rgba(16,185,129,.40));
}

.kusresim-modal .modal-title{
  font-weight:900;
  font-size:16px;
  letter-spacing:.3px;
  color:#ffffff;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

.kusresim-modal .modal-header .close{
  color:#fff;
  opacity:.95;
  text-shadow:none;
}
.kusresim-modal .modal-header .close:hover{ opacity:1; }


/* ==========================================================
   5) MODAL BODY SCROLLBAR GÖRÜNÜMÜ
   - Sadece scrollbar görsel iyileştirme
   Not: Scroll davranışı (overflow) HTML yapısına göre değişebilir.
   ========================================================== */
.kusresim-modal .modal-body::-webkit-scrollbar{ width:10px; }
.kusresim-modal .modal-body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:10px;
}
.kusresim-modal .modal-body::-webkit-scrollbar-track{
  background:rgba(0,0,0,.12);
  border-radius:10px;
}


/* ==========================================================
   6) UPLOADER PANEL (RESİM YÜKLEME ALANI)
   - Panel kutusu, label, input ve focus görünümü
   ========================================================== */
.kusresim-modal .kusresim-uploader{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  padding:12px;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.kusresim-modal .kusresim-uploader .label{
  font-size:12px;
  font-weight:900;
  opacity:.95;
  margin-right:6px;
  color:#f8fafc;
}

.kusresim-modal .kusresim-uploader .form-control{
  min-width: 320px;
  flex: 1 1 420px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#f8fafc;
  border-radius:12px;
}

.kusresim-modal .kusresim-uploader .form-control:focus{
  border-color:rgba(59,130,246,.85);
  box-shadow:0 0 0 2px rgba(59,130,246,.15);
}


/* ==========================================================
   7) BUTON TEMEL STİLİ ve VARYANTLAR
   - .btn-kr: ortak buton gövdesi
   - .btn-kr-primary: Yükle
   - .btn-kr-outline: Kapak Yap
   - .btn-kr-danger: Sil
   ========================================================== */
.kusresim-modal .btn-kr{
  border-radius:12px;
  font-weight:900;
  padding:9px 14px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.18);
  transition:all .15s ease;
  user-select:none;
}

.kusresim-modal .btn-kr-primary{
  background:rgba(59,130,246,.90);
  color:#fff;
}
.kusresim-modal .btn-kr-primary:hover{ filter:brightness(1.08); color:#fff; }

.kusresim-modal .btn-kr-outline{
  background:rgba(255,255,255,.14);
  color:#ffffff;
}
.kusresim-modal .btn-kr-outline:hover{
  background:rgba(255,255,255,.22);
  color:#fff;
}

.kusresim-modal .btn-kr-danger{
  background:rgba(239,68,68,.92);
  color:#fff;
}
.kusresim-modal .btn-kr-danger:hover{ filter:brightness(1.07); color:#fff; }


/* ==========================================================
   8) GALERİ GRID
   - CSS variable (--kr-cols) ile kolon sayısı dinamik
   ========================================================== */
.kusresim-modal .kusresim-grid{
  display:grid;
  grid-template-columns:repeat(var(--kr-cols), minmax(0,1fr));
  gap:12px;
}


/* ==========================================================
   9) GALERİ KARTI
   - Kart kutusu + thumbnail alanı + aksiyon alanı
   ========================================================== */
.kusresim-modal .kusresim-card{
  position:relative;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.kusresim-modal .kusresim-card .img-wrap{
  background:rgba(0,0,0,.10);
  padding: var(--kr-thumb-pad);
  height: calc(var(--kr-thumb-h) + 20px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.kusresim-modal .kusresim-card img{
  width:100%;
  height: var(--kr-thumb-h);
  object-fit:cover;
  border-radius:12px;
  display:block;
}

.kusresim-modal .kusresim-card .actions{
  padding:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}


/* ==========================================================
   10) KAPAK ROZETİ
   - Kapak resmi ayırt etmek için badge
   ========================================================== */
.kusresim-modal .kusresim-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:rgba(16,185,129,.95);
  color:#052e2b;
  font-weight:900;
  font-size:11px;
  padding:6px 12px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}


/* ==========================================================
   11) BOŞ DURUM / YÜKLENİYOR METNİ
   - Liste yokken veya yüklenirken görünen panel
   ========================================================== */
.kusresim-modal .kusresim-empty{
  padding:14px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.24);
  background:rgba(255,255,255,.10);
  color:rgba(248,250,252,.90);
  font-weight:700;
  font-size:13px;
}


/* ==========================================================
   12) MODAL AÇILIŞ ANİMASYONU (Bootstrap fade ile uyumlu)
   ========================================================== */
.kusresim-modal.modal.fade .modal-dialog{ transform:translateY(14px); }
.kusresim-modal.modal.show .modal-dialog{ transform:translateY(0); }


/* ==========================================================
   13) LIGHTBOX / PREVIEW MODAL
   - Büyük resim görüntüleme ekranı
   ========================================================== */
#KusResimPreviewModal .modal-dialog { max-width: 96vw; }

.kr-preview-content{
  background: rgba(0,0,0,.92);
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.kr-preview-body{
  height: 86vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
}

#KusResimLightboxImg{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.kr-preview-close{
  position:absolute;
  top:10px; right:14px;
  width:42px; height:42px;
  border:0;
  border-radius: 10px;
  font-size: 28px;
  line-height: 40px;
  color:#fff;
  background: rgba(255,255,255,.12);
  cursor:pointer;
}
.kr-preview-close:hover{ background: rgba(255,255,255,.22); }


/* ==========================================================
   14) UPLOADER SABİT – LİSTE KAYAR (OPSİYONEL YAPI)
   ÖNEMLİ:
   - Bu bölüm, HTML içinde şu sınıflar kullanılırsa devreye girer:
     .kusresim-body / .kusresim-sticky / .kusresim-upload-row / .kusresim-scroll
   - Kullanılmıyorsa zararı yoktur (scope: .kusresim-modal)
   ========================================================== */

/* (Mükerrer) Modal genişlik — bilinçli bırakıldı */
.kusresim-modal .modal-dialog{
  max-width: 980px;
}

/* Modal body'yi flex kolon yaparak iç scroll yönetimi */
.kusresim-modal .kusresim-body{
  display: flex;
  flex-direction: column;
  padding: 14px;
  height: 80vh;
  max-height: 80vh;
  overflow: hidden;        /* scroll'u iç alana verir */
}

/* Uploader alanını "sticky" yapar (üstte sabit durur) */
.kusresim-modal .kusresim-sticky{
  position: sticky;
  top: 0;
  z-index: 10;
  background: #2f3a4a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
}

/* Upload satır düzeni (input + buton yan yana) */
.kusresim-modal .kusresim-upload-row{
  display: flex;
  gap: 10px;
  align-items: center;
}

.kusresim-modal .kusresim-upload-row .form-control{
  flex: 1;
  height: 40px;
}

/* Sadece liste alanı scroll olsun diye */
.kusresim-modal .kusresim-scroll{
  flex: 1;
  overflow-y: auto;
  margin-top: 12px;
  padding-right: 8px;
}

/* Liste scroll görünümü */
.kusresim-modal .kusresim-scroll::-webkit-scrollbar{
  width: 10px;
}
.kusresim-modal .kusresim-scroll::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: rgba(255,255,255,.18);
}
.kusresim-modal .kusresim-scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,.15);
}

/* Mobil uyum */
@media (max-width: 768px){
  .kusresim-modal .kusresim-body{
    height: 86vh;
    max-height: 86vh;
  }
  .kusresim-modal .kusresim-upload-row{
    flex-direction: column;
    align-items: stretch;
  }
  .kusresim-modal .kusresim-upload-row .form-control{
    width: 100%;
  }
  .kusresim-modal .kusresim-upload-row .btn-kr{
    width: 100%;
  }

  
}


/* ==========================================================
   ✅ SADECE: #GuvercinIrkEkleModal içindeki DataTables görünümü
   - Pagination (1,2) rakamları görünür
   - Hover satır efekti
   - Search/length select renkleri
   - Aktif sayfa butonu belirgin
   Not: Bootstrap4/5 DataTables "page-link" kullanabiliyor.
   ========================================================== */

#GuvercinIrkEkleModal .dataTables_wrapper{
  color:#e9eef5 !important;
}

/* üst alan: search + length + info */
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_length label,
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_filter label,
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_info{
  color:#e9eef5 !important;
  font-weight:700 !important;
}

#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_filter input{
  background:#0f172a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px !important;
  padding:.35rem .6rem !important;
  outline:none !important;
}

#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_length select{
  background:#0f172a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px !important;
  padding:.25rem .45rem !important;
  outline:none !important;
}

/* tablo */
#GuvercinIrkEkleModal #IrkListeTable{
  border-color: rgba(255,255,255,.12) !important;
}

#GuvercinIrkEkleModal #IrkListeTable thead th{
  background:#111827 !important;
  color:#ffffff !important;
  border-color: rgba(255,255,255,.12) !important;
  font-weight:800 !important;
}

#GuvercinIrkEkleModal #IrkListeTable tbody td{
  color:#e9eef5 !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* satır hover */
#GuvercinIrkEkleModal #IrkListeTable tbody tr:hover{
  background: rgba(34,197,94,.12) !important;
}
#GuvercinIrkEkleModal #IrkListeTable tbody tr:hover td{
  color:#ffffff !important;
}

/* pagination kapsayıcı */
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate{
  padding-top:.35rem !important;
}

/* DataTables default */
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button{
  background:#0f172a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:10px !important;
  padding:.25rem .65rem !important;
  margin:0 .15rem !important;
  cursor:pointer !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:#1f2937 !important;
  border-color: rgba(255,255,255,.28) !important;
  color:#ffffff !important;
}
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:#22c55e !important;
  color:#0b1220 !important;
  border-color:#22c55e !important;
  font-weight:900 !important;
}
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
}

/* Bootstrap integration (li.page-item > a.page-link) */
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate .page-link{
  background:#0f172a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:10px !important;
  margin:0 .15rem !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate .page-item.active .page-link{
  background:#22c55e !important;
  color:#0b1220 !important;
  border-color:#22c55e !important;
  font-weight:900 !important;
}
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate .page-link:hover{
  background:#1f2937 !important;
  border-color: rgba(255,255,255,.28) !important;
  color:#ffffff !important;
}

/* focus (mavi saçmalığı kes) */
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button:focus,
#GuvercinIrkEkleModal .dataTables_wrapper .dataTables_paginate .page-link:focus{
  outline:none !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22) !important;
}


/* ==========================================================
   ✅ SADECE: #GuvercinTurEkleModal içindeki DataTables görünümü
   - Pagination rakamları görünür
   - Hover satır efekti
   - Search/length select renkleri
   - Aktif sayfa butonu belirgin
   Not: Bootstrap4/5 DataTables "page-link" kullanabiliyor.
   ========================================================== */

#GuvercinTurEkleModal .dataTables_wrapper{
  color:#e9eef5 !important;
}

/* üst alan: search + length + info */
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_length label,
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_filter label,
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_info{
  color:#e9eef5 !important;
  font-weight:700 !important;
}

#GuvercinTurEkleModal .dataTables_wrapper .dataTables_filter input{
  background:#0f172a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px !important;
  padding:.35rem .6rem !important;
  outline:none !important;
}

#GuvercinTurEkleModal .dataTables_wrapper .dataTables_length select{
  background:#0f172a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px !important;
  padding:.25rem .45rem !important;
  outline:none !important;
}

/* tablo */
#GuvercinTurEkleModal #TurListeTable{
  border-color: rgba(255,255,255,.12) !important;
}

#GuvercinTurEkleModal #TurListeTable thead th{
  background:#111827 !important;
  color:#ffffff !important;
  border-color: rgba(255,255,255,.12) !important;
  font-weight:800 !important;
}

#GuvercinTurEkleModal #TurListeTable tbody td{
  color:#e9eef5 !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* satır hover */
#GuvercinTurEkleModal #TurListeTable tbody tr:hover{
  background: rgba(34,197,94,.12) !important;
}
#GuvercinTurEkleModal #TurListeTable tbody tr:hover td{
  color:#ffffff !important;
}

/* pagination kapsayıcı */
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate{
  padding-top:.35rem !important;
}

/* DataTables default */
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button{
  background:#0f172a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:10px !important;
  padding:.25rem .65rem !important;
  margin:0 .15rem !important;
  cursor:pointer !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:#1f2937 !important;
  border-color: rgba(255,255,255,.28) !important;
  color:#ffffff !important;
}
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:#22c55e !important;
  color:#0b1220 !important;
  border-color:#22c55e !important;
  font-weight:900 !important;
}
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
}

/* Bootstrap integration (li.page-item > a.page-link) */
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate .page-link{
  background:#0f172a !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:10px !important;
  margin:0 .15rem !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate .page-item.active .page-link{
  background:#22c55e !important;
  color:#0b1220 !important;
  border-color:#22c55e !important;
  font-weight:900 !important;
}
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate .page-link:hover{
  background:#1f2937 !important;
  border-color: rgba(255,255,255,.28) !important;
  color:#ffffff !important;
}

/* focus (mavi saçmalığı kes) */
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate .paginate_button:focus,
#GuvercinTurEkleModal .dataTables_wrapper .dataTables_paginate .page-link:focus{
  outline:none !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22) !important;
}

.select2-container--open { z-index: 999999 !important; }
.select2-dropdown { z-index: 999999 !important; }