/**
 * Button
 */

	.w4l-btn {
		position: relative;
		overflow: hidden; /* Hover arkaplanının köşe yuvarlaklığından taşmasını önler */
		/* Transition tamamen Elementor kontrolünden dinamik olarak yönetilecek */
	}

	.w4l-btn-hover-bg {
		position: absolute;
		inset: 0;
		opacity: 0;
		/* Transition tamamen Elementor kontrolünden dinamik olarak yönetilecek */
		border-radius: inherit;
		z-index: 0;
		pointer-events: none; /* Katmanın tıklamaları bloke etmemesi için eklendi */
	}

	.w4l-btn:hover .w4l-btn-hover-bg {
		opacity: 1;
	}

	/* Grow */
	.w4l-anim-grow:hover {
		transform: scale(1.05);
	}

	/* Float */
	.w4l-anim-float:hover {
		transform: translateY(-5px);
	}

	/* Slide Up */
	.w4l-anim-slide-up {
		position: relative;
		overflow: hidden;
	}

	.w4l-anim-slide-up::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(255,255,255,0.15);
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}

	.w4l-anim-slide-up:hover::before {
		transform: translateY(0);
	}

	/* Glow */
	.w4l-anim-glow:hover {
		box-shadow: 0 0 20px rgba(255,255,255,0.5);
	}
	
/**
 * Post Grid
 */
 
 	/**
	 * All Devices 1 Column Footer Bug Fix (Do Not Delete This)
	 */
	 
	.elementor-widget-w4l_post_grid{
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
    }
	 
	/**
	 * 
	 */
 
	.w4l-post-grid{
		display:grid;
		gap:30px;
	}

	.w4l-post-item{
		display:block;
	}

	.w4l-post-thumbnail img,
	.w4l-post-thumbnail video,
	.w4l-post-thumbnail iframe,
	.w4l-post-thumbnail picture {
		width:100%;
		height:auto;
		display:block;
	}

	.w4l-post-title{
		margin-top:15px;
		font-size:20px;
		line-height:1.3;
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.w4l-post-title::before {
		content: "";
		position: absolute;
		inset: 0;
		opacity: 0;
		border-radius: inherit;
		z-index: -1;
		pointer-events: none;
	}

	.w4l-post-item:hover .w4l-post-title::before,
	.w4l-post-title:hover::before {
		opacity: 1;
	}

	.w4l-post-title a {
		position: relative;
		z-index: 1;
	}

	.w4l-post-grid-search{
		display:flex;
		gap:10px;
		margin-bottom:20px;
		align-items:center;
	}

	.w4l-post-grid-search-input{
		width:100%;
		max-width:420px;
		padding:12px 14px;
		border:1px solid #ddd;
		border-radius:8px;
		outline:none;
	}

	.w4l-post-grid-navigation{
		margin-top:30px;
	}

	/* Pagination ve Load More Hoverları için genel yapı */
	.w4l-page-btn, .w4l-load-more-btn {
		position: relative;
		overflow: hidden;
		isolation: isolate; /* Yazıların ve normal arka planın birbirine girmesini engeller, pseudo-element'i güvenle araya alır */
		/* Transition süresi Elementor üzerinden atanacak */
	}

	/* Hover background katmanları + Yeni Gradient Pseudo-element fix */
	.w4l-page-btn-hover-bg, .w4l-load-more-hover-bg,
	.w4l-page-btn::before, .w4l-load-more-btn::before {
		content: "";
		position: absolute;
		inset: 0;
		opacity: 0;
		border-radius: inherit;
		z-index: -1; /* Normal background üstünde, text altında kalır */
		pointer-events: none;
	}

	/* Hover tetikleyicileri */
	.w4l-page-btn:hover .w4l-page-btn-hover-bg,
	.w4l-load-more-btn:hover .w4l-load-more-hover-bg,
	.w4l-page-btn:hover::before,
	.w4l-load-more-btn:hover::before {
		opacity: 1;
	}

	.w4l-page-btn.is-active{
		text-decoration:underline;
	}

	.w4l-no-posts{
		grid-column:1 / -1;
		padding:20px 0;
		opacity:.75;
	}
	
	.w4l-post-grid-search{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    align-items:center;
	}

	.w4l-post-grid-search-input{
		width:100%;
		max-width:420px;
		padding:12px 14px;
		border:1px solid #ddd;
		border-radius:8px;
	}

	.w4l-post-grid-navigation{
		margin-top:30px;
	}
	
	.w4l-post-item{
		opacity: 0;
		transform: translateY(28px);
	}

	.w4l-post-item.w4l-post-item-in{
		opacity: 1;
		transform: translateY(0);
		transition:
			opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--w4l-delay, 0ms);
		will-change: opacity, transform;
	}

	@media (prefers-reduced-motion: reduce){
		.w4l-post-item{
			opacity: 1;
			transform: none;
		}

		.w4l-post-item.w4l-post-item-in{
			transition: none;
		}
	}
	
	body.elementor-editor-active .w4l-post-item,
	.w4l-editor-mode .w4l-post-item{
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	body.elementor-editor-active .w4l-post-item.w4l-post-item-in,
	.w4l-editor-mode .w4l-post-item.w4l-post-item-in{
		opacity: 1 !important;
		transform: none !important;
	}
	
	/**
	 * Card Hover Animations
	 */
		.w4l-post-item{
			transition:
				transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
				box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
			will-change: transform;
		}
		
		.w4l-post-item:hover{
			transform: translateY(-4px);
		}
		
		.w4l-post-thumbnail{
			overflow: hidden;
		}
    
		.w4l-post-thumbnail img,
		.w4l-post-thumbnail video,
		.w4l-post-thumbnail iframe,
		.w4l-post-thumbnail picture {
			width: 100%;
			height: auto;
			display: block;
			transform: scale(1);
			transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
			will-change: transform;
		}
		
		.w4l-post-item:hover .w4l-post-thumbnail img,
		.w4l-post-item:hover .w4l-post-thumbnail video,
		.w4l-post-item:hover .w4l-post-thumbnail iframe,
		.w4l-post-item:hover .w4l-post-thumbnail picture {
			transform: scale(1.03);
		}
		
		/* Tarayıcının varsayılan X butonunu tamamen iptal et */
		.w4l-post-grid-search-input::-webkit-search-decoration,
		.w4l-post-grid-search-input::-webkit-search-cancel-button,
		.w4l-post-grid-search-input::-webkit-search-results-button,
		.w4l-post-grid-search-input::-webkit-search-results-decoration {
			display: none !important;
			-webkit-appearance: none;
		}

		/* Yeni eklediğimiz Wrapper'ın konumlandırması */
		.w4l-search-input-wrapper {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			max-width: 420px;
		}

		/* Input'un Wrapper'a tam oturması ve sağdan hem Icon hem X ikonu için pay bırakması */
		.w4l-search-input-wrapper .w4l-post-grid-search-input {
			width: 100% !important;
			max-width: 100% !important;
			padding-right: 70px !important; /* Her iki ikon için genişletildi */
		}

		/* Manuel X Butonunun Pozisyonu (Arama ikonunun soluna alındı) */
		.w4l-post-grid-search-clear {
			position: absolute;
			right: 40px; /* 12px'den 40px'e çekildi ki ikonla çakışmasın */
			top: 50%;
			transform: translateY(-50%);
			background: transparent !important;
			border: none;
			padding: 0;
			cursor: pointer;
			z-index: 10;
		}

		/* SVG ikon davranışı (Orijinal yapı korundu) */
		.w4l-post-grid-search-clear svg {
			display: block;
			fill: #ffffff;
			width: 20px;
			height: 20px;
			transition: all 0.3s ease;
		}

		/* Dekoratif Search Icon Pozisyonu (En sağda, arkaplansız ve tıklanabilir) */
		.w4l-search-icon-wrapper {
			position: absolute;
			right: 14px;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: text; /* Focus mantığını yansıtması için */
			background: transparent;
			border: none;
			z-index: 5;
		}

		/* Elementor İkonları için Standart Ayarlar */
		.w4l-search-icon-wrapper svg {
			display: block;
			fill: #666; /* Elementor'den değer verilmezse varsayılan */
			width: 16px;
			height: auto;
			transition: all 0.3s ease;
		}

		.w4l-search-icon-wrapper i {
			color: #666; /* Elementor'den değer verilmezse varsayılan */
			font-size: 16px;
			transition: all 0.3s ease;
		}
		
	/* -----------------------------------------
   Preview Widget - Zoom Overlay Icon
		----------------------------------------- */
		.w4l-preview-overlay-icon {
			position: absolute;
			top: 15px;
			right: 15px;
			width: 36px;
			height: 36px;
			background: rgba(0, 0, 0, 0.45);
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			border: 1px solid rgba(255, 255, 255, 0.15);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
			pointer-events: none; /* ÇOK ÖNEMLİ: Tıklamaları engellemez, Lightbox sorunsuz çalışır */
			box-shadow: 0 4px 10px rgba(0,0,0,0.15);
			transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
		}

		.w4l-preview-overlay-icon svg {
			width: 18px;
			height: 18px;
			stroke: #ffffff;
			stroke-width: 2;
			transition: transform 0.3s ease;
		}

		/* Hover efekti: İkon her zaman görünür, fare resmin üzerine gelince premium bir şekilde hafif belirginleşir */
		.w4l-preview-img-wrapper:hover .w4l-preview-overlay-icon {
			background: rgba(0, 0, 0, 0.7);
			border-color: rgba(255, 255, 255, 0.3);
			transform: scale(1.08);
		}
		
		
		/* -----------------------------------------
		 * Post Navigation - Smooth Background & Gradient Hover Fix
		 * ----------------------------------------- */

		/* Köşelerin (Border Radius) dışına taşmayı engellemek ve z-index düzgün çalışması için */
		.ue-post-pagination-btn {
			position: relative;
			overflow: hidden; 
		}

		/* Hover Overlay (Gradient & Solid Smooth Transition) */
		.ue-post-pagination-hover-bg {
			position: absolute;
			inset: 0;
			opacity: 0;
			/* Transition tamamen Elementor kontrolünden dinamik olarak yönetilecek */
			border-radius: inherit; /* Parent elementin köşe yuvarlaklığını alır */
			z-index: 0;
			pointer-events: none; /* Katmanın tıklamaları bloke etmemesi için */
		}

		/* Mouse üzerine gelince katman belirir */
		.ue-post-pagination-btn:hover .ue-post-pagination-hover-bg {
			opacity: 1;
		}

		/* İkon ve Metinlerin, oluşturulan zemin katmanının (z-index:0) altında kalmaması için */
		.ue-post-pagination-btn-icon,
		.ue-post-pagination-btn-label {
			position: relative;
			z-index: 1;
		}
		
		/* -----------------------------------------
		 * No Posts Found Custom Wrapper (AJAX Uyumlu)
		 * ----------------------------------------- */

		/* Özel yapıyı varsayılan olarak gizle */
		.w4l-post-grid-wrapper .w4l-no-posts-custom-wrapper {
			display: none;
			align-items: center;
			width: 100%;
		}

		/* AJAX veya sayfa yüklemesi sonrası grid alanına .w4l-no-posts sınıfı düşerse, kendi özel yapımızı görünür yap */
		.w4l-post-grid-wrapper:has(.w4l-no-posts) .w4l-no-posts-custom-wrapper {
			display: flex;
		}

		/* Kendi özel yapımız göründüğünde, orijinal metni ve grid boşluklarını barındıran alanı tamamen gizle */
		.w4l-post-grid-wrapper:has(.w4l-no-posts) .w4l-post-grid {
			display: none;
		}

		/* İkonun her zaman tek satırda ve yazının tam solunda düzgün kalmasını garanti et */
		.w4l-no-posts-custom-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.w4l-no-posts-custom-icon svg {
			display: block;
			transition: all 0.3s ease;
		}
		
		/* -----------------------------------------
		 * Tags Widget
		 * ----------------------------------------- */
		.w4l-tags-wrapper {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 100%;
		}

		.w4l-tag-item {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			padding: 6px 14px;
			background-color: #111111;
			border: 1px solid #2a2a2a;
			border-radius: 9999px;
			color: #d1d5db;
			font-size: 13px;
			font-weight: 500;
			line-height: 1.2;
			text-decoration: none;
			transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
			user-select: none;
			white-space: nowrap;
		}

		.w4l-tag-item:hover {
			border-color: rgba(255, 60, 60, 0.4);
			background-color: rgba(255, 60, 60, 0.05);
			color: #ffffff;
		}

		.w4l-tag-icon {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.w4l-tag-icon .w4l-tag-png {
			display: block;
			width: 14px;
			height: 14px;
			background-color: currentColor;
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-position: center;
			mask-position: center;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			transition: all 0.3s ease;
			color-scheme: only light;
			forced-color-adjust: none;
		}

		a.w4l-tag-item {
			cursor: pointer;
		}
		
		/* -----------------------------------------
		 * Tags Widget - Premium Utilities
		 * ----------------------------------------- */
		 
		/* Override Variables for Repeater Items */
		.w4l-tag-item[class*="elementor-repeater-item-"] {
			/* Repeater'dan gelen değişkenler varsa öncelik tanınır, yoksa normal arka planı kullanır */
			background-color: var(--w4l-tag-bg, #111111);
			border-color: var(--w4l-tag-border, #2a2a2a);
		}

		.w4l-tag-item[class*="elementor-repeater-item-"] .w4l-tag-text {
			color: var(--w4l-tag-color, #d1d5db);
		}

		/* Base Transition for Custom Durations */
		.w4l-tag-item,
		.w4l-tag-item * {
			transition-property: background-color, border-color, color, fill, opacity, transform, box-shadow;
			transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
		}

		/* Hover Animations Classes */
		.w4l-tag-item.w4l-anim-scale,
		.w4l-tag-item.w4l-anim-lift,
		.w4l-tag-item.w4l-anim-glow,
		.w4l-tag-item.w4l-anim-slide {
			will-change: transform, box-shadow;
		}

		.w4l-tag-item.w4l-anim-glow:hover {
			box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
		}

		.w4l-tag-item.w4l-anim-slide {
			position: relative;
			overflow: hidden;
		}

		.w4l-tag-item.w4l-anim-slide::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(255,255,255,0.05);
			transform: translateY(100%);
			transition: transform inherit;
			pointer-events: none;
			z-index: 0;
		}

		.w4l-tag-item.w4l-anim-slide:hover::before {
			transform: translateY(0);
		}

		.w4l-tag-item.w4l-anim-slide .w4l-tag-text,
		.w4l-tag-item.w4l-anim-slide .w4l-tag-icon {
			position: relative;
			z-index: 1;
		}
		
		/* custom.css dosyasının en sonuna ekleyin: */

		.w4l-tag-item {
			position: relative;
		}

		.w4l-tag-link-overlay {
			position: absolute;
			inset: 0;
			z-index: 10;
			border-radius: inherit;
			border: none !important;
			background: transparent !important;
			text-decoration: none !important;
			outline: none !important;
		}