:root {
	--vz-body-font-size: 0.89rem;
	--vz-form-bg1: #f1f5f9;
	--vz-form-bg2: #ffffff;
	--vz-form-bg3 : #a9bdd20d;
	--vz-form-bg4 : #ffffff94;
	--vz-form-bg : #fbfcfd;
	--vz-form-border: #e0e6eb;
	--vz-form-color : #373030;
	--vz-header-bg : #CCC;
	--vz-body-bg1 : #eaf0f5;
}

[data-bs-theme=dark] {
	--vz-form-bg: #292e32;
	--vz-form-border: #54595d;
	--vz-form-color : #e0e6eb;
	--vz-body-bg1 : #1a1d21;
	--vz-vertical-menu-bg: #212529 !important;
	--vz-vertical-menu-border : #ffffff0d  !important;
    --vz-vertical-menu-item-color: #ced4da !important;
	    --vz-vertical-menu-item-hover-color: #878a99 !important;
		--vz-vertical-menu-item-active-color: #878a99;
	
}

:root[data-topbar=dark] {
    --vz-header-bg :  #222955; /*#37416 */
	--vz-topbar-user-bg: #52639c4a;
}







.navbar-menu .navbar-nav .nav-link {

	font-family: inherit;
}


.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --vz-offcanvas-width: 600px !important;
}

.fancybox_image {
    display: flex;
    padding: 4px;
    background: #fff;
	border-radius:5px;
	margin:5px 0px;
    align-items: center;
}
.table-card {
	min-height: 450px !important;}

.module_title{
	font-size: 20px;
   /* border-bottom: 1px solid #c7c7c7;
    padding: 5px 5px 10px 5px;*/
    margin: 10px 10px 20px 0px;
    color: var(--vz-heading-color);
    font-weight: 600;
	
	}



.navbar-menu .navbar-nav .nav-link {
    border-bottom: 1px dotted #cccccc1a  !important;
}
	

@media (max-width: 991.98px){

.a-flex{
    display: block!important;
}


.panel_inner_menu{}
.panel_inner_menu .nav{
	display:block !important;
	}

}



.ar_module_nav{}
.ar_module_nav .nav-item {
	background-color: var(--vz-secondary-bg);
	margin-right: 15px;
	border-radius: 5px;
	padding: 4px 6px;
	font-size: 14px;
	box-shadow: 0px 0px 16px -2px rgba(0, 0, 0, .05);
}

.ar_module_nav .add{
	background-color: #2890e9  !important;
}
.ar_module_nav .add .nav-link{
	color: #FFF !important;
}



.hscroll-menu{
  margin:0px 0px 0px 0px;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.hscroll-menu li{
	display: inline-block;
	}
	
	
.hscroll-menu form{
	display:inline-block;
	}
.hscroll-menu form input{
	border:none; width:160px; margin:0px; padding:6px; border-radius:3px;  border: 1px solid #cccccc47 !important;
	}

.hscroll-menu::-webkit-scrollbar {
  -webkit-appearance:none;
  width:12px;
  _background-color:#e6e6e6;
}

.hscroll-menu::-webkit-scrollbar-thumb {
  border-radius:0px;
  border-top:8px solid rgba(255,255,255,0);
  background-clip:content-box;
  _background-color:#e6e6e6;
  background-color: #e6e6e6;
}
.hscroll-menu::-webkit-scrollbar-thumb:hover {
  border-radius:0px;
  border-top:8px solid rgba(255,255,255,0);
  background-clip:content-box;
  background-color:#e6e6e6;
}

.hscroll-menu::-webkit-scrollbar-corner {
  background-color:#e6e6e6;
}





.item-body{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 1.6rem;
}



.item-body .icon-container {
	align-items: center;
	border: 0.1rem solid #dbe0eb;
	border-radius: 50%;
	display: flex;
	height: 48px;
	justify-content: center;
	width: 48px;
}


.item-body .icon-container img {
	border-radius: 50%;
	height: 24px;
	width: 24px;
}

.item-body .item-information{
	display: flex;
	gap: 1.6rem;
	flex-direction: row;
}

.item-body .item-container {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	gap: 0.8rem;
	margin-left: auto;
}

.item-body .title {
	margin: 0;
	font-size:18px;
	font-weight:600;
	color:#000 !important;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item-body .long-url {
	color: #273144;
	font-size: 12px;
	line-height: 2rem;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item-body .short-url {
	color: #2a5bd7;
	font-size: 14px;
	font-weight: 600;
	line-height: 2rem;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 991.98px) {



	.item-body {
		display: block;
		flex-direction: row;
		padding: 1.6rem;
	}

	.item-body .item-container {
		margin-top: 5px;
		border-top: 1px solid #ebebeb;
		padding-top: 10px;
		flex-direction : column !important;
	}

}

.datalist-img{ width:80px; height:50px;}
.datalist-title{
	word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; min-width:400px;
	}

.datalist-types{ display:flex; gap:8px}
.datalist-types .item{
	 -o-transition: color .2s linear, background .2s linear;
    -moz-transition: color .2s linear, background .2s linear;
    -webkit-transition: color .2s linear, background .2s linear;
    transition: color .2s linear, background .2s linear;
	width: 36px; 
	border-radius: 5px; 
	display:block; 
	cursor:pointer; 
	padding:6px 0px; 
	color:#7191a1;
	font-size:15px; 
	font-weight:600;
	float:left; 
	background:#e1ebfd; 
	text-align:center;  }
.datalist-types .item:hover{background:#c0392b !important; text-decoration:none; color:#FFF;}
.datalist-types .active{ background: #069 !important; color:#FFF; }




 .add_inner{
        background: var(--vz-secondary-bg); 
	    padding: 15px;
        min-height: 1050px;
        border-radius:8px;}
        .panel {
            background: transparent !important; padding:0px !important;
        }
	 
/* ---------------------------------------------------------------------
   LİSTEDE SİTE ADRESİ  (.datalist-url)

   Başlığın altında ince bir satır: içeriğin sitedeki yolu. Editör
   içeriği görmek için "İşlemler → Görüntüle" menüsünü açmak zorunda
   kalmıyor, hem adresi görüyor hem tek tıkla gidiyor.

   TEK SATIR + ELLIPSIS: uzun başlıklı haberlerin adresi de uzun oluyor.
   Kırpma noktası kolonun O ANKİ genişliğinden geliyor; PHP'de sabit
   karakter sayısıyla kesmek dar ekranda taşar, geniş ekranda boşuna
   kısaltırdı.

   Sessiz duruyor (küçük, gri) — satırın konusu başlık, adres değil;
   ama üzerine gelince renkleniyor ki tıklanabilirliği belli olsun.
   --------------------------------------------------------------------- */
.datalist-url{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--vz-secondary-color, #878a99);
    text-decoration: none;

    /* ÜST SINIR ŞART. Tablo düzeni otomatik: hücre en geniş çocuğuna
       göre büyüyor. `max-width:100%` burada işe yaramıyor, çünkü
       yüzdenin dayandığı hücrenin kendisi içeriğe göre genişliyor.
       ÖLÇÜLDÜ: sınırsızken uzun bir adres başlık hücresini 576px'den
       1461px'e çıkardı ve diğer kolonları eziyordu. */
    max-width: 520px;
}
.datalist-url span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* FLEX ÇOCUĞU VARSAYILAN OLARAK KÜÇÜLMÜYOR: min-width başlangıçta
       `auto`, yani içerik genişliğinin altına inmiyor ve ellipsis hiç
       devreye girmiyordu (ölçüldü: kırpma yok, hücre uzuyor).
       `min-width:0` flexbox'ta metin kırpmanın olmazsa olmazı. */
    min-width: 0;
}
.datalist-url i{ flex: 0 0 auto; font-size: 12px; opacity: .7; }

.datalist-url:hover,
.datalist-url:focus-visible{
    color: var(--vz-primary, #405189);
    text-decoration: underline;
}
.datalist-url:hover i{ opacity: 1; }