/**
 * Lightweight Gutenberg Slider – Frontend Styles v4 (Final)
 *
 * Mimari:
 *  - Tüm dinamik değerler --lgs-* CSS custom property ile yönetilir.
 *    PHP inline style olarak inject eder; tema override edebilir.
 *  - Animasyonlar @keyframes tabanlı (transition değil).
 *    Nedeni: display:none→block + transition aynı frame'de çalışmaz.
 *  - overflow:hidden .lgs-track üzerinde; container açık → bullets görünür.
 *  - wp-block-columns override: flex-wrap + width:100% ile bullets altına iner.
 *
 * @package LightweightSlider
 */

/* ==========================================================================
   1. CSS Custom Properties — PHP lgs_build_inline_css() ile override edilir
   ========================================================================== */

.is-slider {
	--lgs-duration:             0.4s;
	--lgs-arrow-size:           44px;
	--lgs-arrow-bg:             #ffffff;
	--lgs-arrow-bg-hover:       #f0f0f0;
	--lgs-arrow-color:          #1a1a1a;
	--lgs-arrow-border-radius:  50%;
	--lgs-arrow-shadow:         0 2px 6px rgba(0,0,0,.15);
	--lgs-arrow-offset:         .75rem;
	--lgs-bullet-size:          10px;
	--lgs-bullet-top-gap:       8px;
	--lgs-bullet-color:         rgba(0,0,0,.25);
	--lgs-bullet-color-active:  #1a1a1a;
	--lgs-bullet-border-radius: 50%;
	--lgs-bullet-gap:           8px;
	--lgs-arrow-inline-bg:      #1a4fbd;
	--lgs-arrow-inline-color:   #ffffff;
	--lgs-arrow-inline-width:   44px;
	--lgs-arrow-inline-height:  44px;
	--lgs-arrow-inline-radius:  6px;
	--lgs-arrow-inline-bottom:  16px;
	--lgs-arrow-inline-right:   16px;
}

/* ==========================================================================
   2. Container
   ========================================================================== */

/*
 * FOUC önlemi: JS initialize edene kadar slider içeriği görünmez.
 * initSlider() tamamlanınca data-lgs-ready eklenir → opacity:1 + fade-in.
 * visibility:hidden değil opacity:0 kullanılır: layout space korunur,
 * sayfa kayması (CLS) olmaz.
 */
.is-slider {
	position: relative;
	opacity:  0;
	transition: opacity .2s ease;
}

.is-slider[data-lgs-ready] { opacity: 1; }

/* ==========================================================================
   3. Track — overflow:hidden burada; container'da değil
   ========================================================================== */

.lgs-track {
	position:    relative;
	width:       100%;
	overflow:    hidden;
	cursor:      grab;
	user-select: none;
}

.lgs-track:active { cursor: grabbing; }

/* ==========================================================================
   4. Slides
   ========================================================================== */

.lgs-slide { display: none; width: 100%; }

/* Aktif slide: normal akışta */
.lgs-slide--active {
	display:  block;
	position: relative;
	z-index:  2;
}

/* Çıkan slide: animasyon boyunca absolute; aktifin altında */
.lgs-is-leaving {
	display:  block;
	position: absolute;
	inset:    0;
	z-index:  1;
}

/* ==========================================================================
   5. Gutenberg wp-block-columns override
   ─ flex-wrap:wrap + width:100% → bullets track'in altına iner.
   ========================================================================== */

/*
 * Gutenberg, .wp-block-columns için display:flex + flex-direction:row atar.
 * Kendi stillerini !important kullanmadan override edemeyiz çünkü:
 *  - Specificity eşit (.wp-block-columns .wp-block-column vs .is-slider.wp-block-columns ...)
 *  - Gutenberg temasına göre sıralama değişebilir.
 * Bu kurallar kasıtlı olarak !important kullanır.
 */
.is-slider.wp-block-columns {
	flex-wrap: wrap !important;
}

.is-slider.wp-block-columns > .lgs-track,
.is-slider.wp-block-columns > .lgs-bullets {
	width:      100% !important;
	flex-basis: 100% !important;
	max-width:  100% !important;
}

.is-slider.wp-block-columns .lgs-slide.wp-block-column {
	width:    100% !important;
	flex:     none !important;
	max-width: 100% !important;
}

/* ==========================================================================
   6. Efekt: FADE
   ========================================================================== */

[data-lgs-effect="fade"] .lgs-anim-fade-in  { animation: lgs-fade-in  var(--lgs-duration) ease both; }
[data-lgs-effect="fade"] .lgs-anim-fade-out { animation: lgs-fade-out var(--lgs-duration) ease both; }

@keyframes lgs-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgs-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ==========================================================================
   7. Efekt: SLIDE-RIGHT (yön-akıllı)
   ========================================================================== */

[data-lgs-effect="slide-right"] .lgs-anim-enter-right { animation: lgs-from-right var(--lgs-duration) cubic-bezier(.25,.46,.45,.94) both; }
[data-lgs-effect="slide-right"] .lgs-anim-enter-left  { animation: lgs-from-left  var(--lgs-duration) cubic-bezier(.25,.46,.45,.94) both; }
[data-lgs-effect="slide-right"] .lgs-anim-leave-left  { animation: lgs-to-left    var(--lgs-duration) cubic-bezier(.25,.46,.45,.94) both; }
[data-lgs-effect="slide-right"] .lgs-anim-leave-right { animation: lgs-to-right   var(--lgs-duration) cubic-bezier(.25,.46,.45,.94) both; }

@keyframes lgs-from-right { from { transform: translateX( 100%); } to { transform: translateX(0); } }
@keyframes lgs-from-left  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes lgs-to-left    { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes lgs-to-right   { from { transform: translateX(0); } to { transform: translateX( 100%); } }

/* ==========================================================================
   8. Efekt: ZOOM-IN
   ========================================================================== */

[data-lgs-effect="zoom-in"] .lgs-anim-zoom-in  { animation: lgs-zoom-in  var(--lgs-duration) cubic-bezier(.25,.46,.45,.94) both; }
[data-lgs-effect="zoom-in"] .lgs-anim-zoom-out { animation: lgs-zoom-out var(--lgs-duration) cubic-bezier(.25,.46,.45,.94) both; }

@keyframes lgs-zoom-in  { from { opacity:0; transform:scale(.88); } to { opacity:1; transform:scale(1);    } }
@keyframes lgs-zoom-out { from { opacity:1; transform:scale(1);   } to { opacity:0; transform:scale(1.06); } }

/* ==========================================================================
   9. Bullets
   ========================================================================== */

.lgs-bullets {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             var(--lgs-bullet-gap);
	width:           100%;
	padding:         var(--lgs-bullet-top-gap) 0 0;
	margin:          0;
	list-style:      none;
}

.lgs-bullet {
	display:       block;
	flex-shrink:   0;
	width:         var(--lgs-bullet-size);
	height:        var(--lgs-bullet-size);
	padding:       0;
	background:    var(--lgs-bullet-color);
	border:        none;
	border-radius: var(--lgs-bullet-border-radius);
	cursor:        pointer;
	transition:    background .2s ease, transform .2s ease;
}

.lgs-bullet:hover,
.lgs-bullet:focus-visible {
	background:     var(--lgs-bullet-color-active);
	outline:        2px solid var(--lgs-bullet-color-active);
	outline-offset: 2px;
}

.lgs-bullet--active {
	background: var(--lgs-bullet-color-active);
	transform:  scale(1.4);
}

/* ==========================================================================
   10. Oklar — temel stiller
   ========================================================================== */

.lgs-arrow {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         10;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           var(--lgs-arrow-size);
	height:          var(--lgs-arrow-size);
	padding:         0;
	margin:          0;
	background:      var(--lgs-arrow-bg);
	color:           var(--lgs-arrow-color);
	border:          none;
	border-radius:   var(--lgs-arrow-border-radius);
	box-shadow:      var(--lgs-arrow-shadow);
	font-size:       calc(var(--lgs-arrow-size) * .4);
	line-height:     1;
	cursor:          pointer;
	transition:      background .2s ease, box-shadow .2s ease;
}

.lgs-arrow:hover,
.lgs-arrow:focus-visible {
	background:     var(--lgs-arrow-bg-hover);
	box-shadow:     0 3px 10px rgba(0,0,0,.2);
	outline:        2px solid currentColor;
	outline-offset: 2px;
}

.lgs-arrow:disabled { opacity: .3; cursor: not-allowed; }

/* ==========================================================================
   11. Oklar — "Yanlarda" stili (.lgs-arrows--default)
   ========================================================================== */

.lgs-arrows--default .lgs-arrow--prev { left:  var(--lgs-arrow-offset); }
.lgs-arrows--default .lgs-arrow--next { right: var(--lgs-arrow-offset); }

/* ==========================================================================
   12. Oklar — "Sağ Alt Köşe" stili
   .lgs-arrows--inline  (JS tarafından atanır)
   .is-slider--arrows-inline  (geriye dönük uyumluluk — manuel class)
   ========================================================================== */

.lgs-arrows--inline .lgs-arrow,
.is-slider--arrows-inline .lgs-arrow {
	top:           auto;
	transform:     none;
	width:         var(--lgs-arrow-inline-width);
	height:        var(--lgs-arrow-inline-height);
	background:    var(--lgs-arrow-inline-bg);
	color:         var(--lgs-arrow-inline-color);
	border-radius: 0;
	box-shadow:    none;
	font-size:     calc(var(--lgs-arrow-size) * .4);
}

.lgs-arrows--inline .lgs-arrow:hover,
.lgs-arrows--inline .lgs-arrow:focus,
.lgs-arrows--inline .lgs-arrow:focus-visible,
.lgs-arrows--inline .lgs-arrow:active,
.is-slider--arrows-inline .lgs-arrow:hover,
.is-slider--arrows-inline .lgs-arrow:focus,
.is-slider--arrows-inline .lgs-arrow:focus-visible,
.is-slider--arrows-inline .lgs-arrow:active {
	filter:     brightness(.85);
	outline:    none !important;
	box-shadow: none !important;
}

.lgs-arrows--inline .lgs-arrow--prev,
.is-slider--arrows-inline .lgs-arrow--prev {
	right:         calc(var(--lgs-arrow-inline-right) + var(--lgs-arrow-inline-width));
	left:          auto;
	bottom:        var(--lgs-arrow-inline-bottom);
	border-radius: var(--lgs-arrow-inline-radius) 0 0 var(--lgs-arrow-inline-radius);
	border-right:  1px solid rgba(255,255,255,.3);
}

.lgs-arrows--inline .lgs-arrow--next,
.is-slider--arrows-inline .lgs-arrow--next {
	right:         var(--lgs-arrow-inline-right);
	left:          auto;
	bottom:        var(--lgs-arrow-inline-bottom);
	border-radius: 0 var(--lgs-arrow-inline-radius) var(--lgs-arrow-inline-radius) 0;
}

/* ==========================================================================
   13. Utility class'ları
   ========================================================================== */

.is-slider--arrows-hidden  .lgs-arrow   { display: none; }
.is-slider--bullets-hidden .lgs-bullets { display: none; }

/* Okları slider'ın dışına taşır */
.is-slider--arrows-outside {
	--lgs-arrow-offset: calc(var(--lgs-arrow-size) * -1.25);
	padding-inline: calc(var(--lgs-arrow-size) * 1.5);
}

/* ==========================================================================
   14. Reduced-motion — erişilebilirlik
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.is-slider { transition: none; }

	.lgs-anim-enter-right,
	.lgs-anim-enter-left,
	.lgs-anim-leave-left,
	.lgs-anim-leave-right,
	.lgs-anim-fade-in,
	.lgs-anim-fade-out,
	.lgs-anim-zoom-in,
	.lgs-anim-zoom-out { animation:  none !important; }

	.lgs-bullet,
	.lgs-arrow         { transition: none !important; }
}