/* Container */
.sukod-slider-root{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:1804px;
  height:846px;
  margin:0 auto;
  border-radius:24px;
}
.sukod-slider-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.sukod-slide{
  position:relative;
  flex:0 0 100%;
  height:100%;
  overflow:hidden;
}
.sukod-media img, .sukod-media video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Overlay content */
.sukod-overlay{
  position:absolute; inset:0; display:flex; align-items:stretch; pointer-events:none;
}
.sukod-left{
  pointer-events:auto;
  max-width:810px;
  padding:220px 0 210px 80px;
  color:#fff;
}
.sukod-title{
  font-family: -apple-system, BlinkMacSystemFont, 'Arial;
  font-weight:800; font-style:normal;
  color:#fff; font-size:60px; margin:0 0 12px 0; line-height:1.02;
}
.sukod-desc{
  font-family: -apple-system, BlinkMacSystemFont, 'Arial;
  font-weight:300; color:#fff; opacity:.95;
}
.sukod-desc p{margin:0 0 16px 0;}
/* Button area: use theme styles; do not override */
.sukod-slider-btn{ margin-top:28px; }

/* Right short-title list (global) */
.sukod-right-list{ position:absolute; right:40px; top:200px; width:260px; pointer-events:auto; }
.sukod-right-list .item{
  margin:5px 0; padding:16px; border-radius:12px; color:#fff; backdrop-filter: blur(6px);
  background: rgba(0,0,0,.28);
  display:flex; align-items:center; gap:10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Arial;
  font-weight:700;
}
.sukod-right-list .item .dot{ width:8px; height:8px; border-radius:50%; background:#999; display:inline-block;}
.sukod-right-list .item.active{ background:#D52B10; }
.sukod-right-list .item.active .dot{ background:#FECB00; }

/* Corner accent */
.sukod-corner{
  position:absolute; left:24px; bottom:24px; width:40px; height:40px; border:6px solid #FECB00; border-right:none; border-top:none; border-radius:0 0 0 24px;
}

/* Info detail box */
.sukod-info{ position:absolute; right:90px; bottom:34px; width:460px; max-width:40vw; }
.sukod-info .info-bg{  left:-14px; bottom:-14px; width:85%; height:85%; border-radius:59px; background:#D52B10; }
.sukod-info .info-box{ position:relative; background:#000; color:#fff; border-radius:16px; padding:26px; box-shadow:0 8px 28px rgba(0,0,0,.4); }
.sukod-info .info-row{
  display:flex; align-items:center; gap:10px; margin:8px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Arial;
  font-weight:500;
}
.sukod-info .info-row i{ width:22px; text-align:center; }

/* Brand logo at bottom-right */
.sukod-brand{ 
    
    position:absolute; right:18px; bottom:18px; width:200px; height:120px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.2); border-radius:12px; backdrop-filter: blur(4px); }
.sukod-brand img{ max-width:100%; max-height:100%; object-fit:contain; }





/* Enhanced Arrows with better visibility and hover areas */
.sukod-prev,.sukod-next{
  
  width:70px; height:70px; border-radius:50%; border:none; cursor:pointer; pointer-events:auto;
  background:rgba(0,0,0,.6);
  transition:all .3s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  backdrop-filter:blur(4px);
  /* Hover area extension */
  z-index:100;
}



.sukod-prev:before,.sukod-next:before{
  content:'';
  position:absolute;
  top:-10px; left:-10px; right:-10px; bottom:-10px;
  /* Invisible extended hover area */
  pointer-events:auto;
}
.sukod-prev:hover,.sukod-next:hover{
  background:#D52B10;
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 6px 20px rgba(213,43,16,.4);
}
.sukod-prev{ left:20px; }
.sukod-next{ right:20px; }
.sukod-prev span,.sukod-next span{
  display:block; width:100%; height:100%; position:relative;
}
.sukod-prev span:before,.sukod-next span:before{
  content:''; position:absolute; top:50%; left:50%;
  width:16px; height:16px;
  border-top:4px solid #fff; border-right:4px solid #fff;
  transition:all .2s ease;
}
.sukod-prev span:before{
  transform:translate(-40%,-50%) rotate(-135deg); /* left arrow */
}
.sukod-next span:before{
  transform:translate(-60%,-50%) rotate(45deg); /* right arrow */
}
/* Arrow glow effect on hover */
.sukod-prev:hover span:before,
.sukod-next:hover span:before{
  border-color:#FECB00;
  filter:drop-shadow(0 0 4px rgba(254,203,0,.6));
}

@media (max-width: 1024px){
  .sukod-title{ font-size:48px; }
  .sukod-left{ padding:120px 0 120px 32px; max-width:70%; }
  .sukod-right-list{ right:18px; top:140px; width:200px; }
  .sukod-info{ right:18px; bottom:18px; width:60vw; }
}
@media (max-width: 640px){
  .sukod-title{ font-size:36px; }
  .sukod-left{ padding:90px 18px 90px 18px; max-width:100%; }
  .sukod-right-list{ display:none; }
  .sukod-info{ width:auto; left:18px; right:18px; }
}





/* === User-supplied theme mapping & fixes (integrated) === */

/* Fonts (local fallbacks) */
@font-face{font-family:'Arial');font-weight:700;font-style:oblique;font-display:swap}
@font-face{font-family:'Arial';src:local('Arial');font-display:swap}
@font-face{font-family:'Arial';src:local('Arial');font-weight:500;font-display:swap}

/* 0) Remove admin padding; enforce outer spacing via margin */
.sukod-slider-root{
  padding:0;
  margin:100px auto;
  max-width:1804px;
  border-radius:24px;
  overflow:hidden;
  /* Fix for white screen during transitions */
  background:#000;
  position:relative;
}

/* 1) Keep all inner layers rounded so corners are always oval */
.sukod-slider-root{
  border-radius:24px;
  overflow:hidden;
}
.sukod-slider-track{
  border-radius:24px;
}
.sukod-slide{
  border-radius:0; /* Remove border-radius from slides to prevent rendering issues */
  background:#000; /* Fallback background */
}
.sukod-media,
.sukod-media img,
.sukod-media video{
  border-radius:0; /* Remove border-radius from media to prevent white screen */
}

/* 2) Content block sizing similar to provided CSS */
.sukod-left .sukod-content,
.sukod-content{ max-width:810px; padding:220px 0 210px 80px; color:#fff; }
@media (max-width:1024px){
  .sukod-content{ padding:140px 24px 160px; margin-left:0; }
}

/* 3) Title/Desc typography */
.sukod-title{
  font-family: -apple-system, BlinkMacSystemFont, 'Arial;
  font-size:60px; line-height:1.05; color:#fff; font-weight:700;
}
.sukod-desc{
  font-family: -apple-system, BlinkMacSystemFont, 'Arial;
  font-size:15px; line-height:1.6; color:#fff; opacity:.95;
}
.sukod-desc p{ margin:0 0 16px 0; }

/* 4) Shortlist (right list) mapped from .sukod-shortlist/.sukod-short */
.sukod-right-list{ 
  position: absolute;
  right: 70px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex;
  flex-direction: column;
  gap: 0px;
  z-index: 40;
  pointer-events: auto;
  }
.sukod-right-list .item{ display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.25); backdrop-filter:saturate(140%) blur(2px); border-radius:10px; padding:12px 14px 12px 10px; border:none; color:#fff; cursor:pointer; transition:all .25s; }
.sukod-right-list .item .dot{ width:8px; height:8px; background:#aaa; border-radius:50%; }
.sukod-right-list .item .label{
  font-family: -apple-system, BlinkMacSystemFont, ' Arial;
  font-size:16px; color:#fff;
}
.sukod-right-list .item:hover{ background:#D52B10; }
.sukod-right-list .item.active{ background:#D52B10; }
.sukod-right-list .item.active .dot{ background:#FECB00; }

/* 5) Info box styling */
.sukod-info{ position:absolute; right:32px; bottom:24px; pointer-events:auto; }
.sukod-info .info-bg, .sukod-info-decor{          }
.sukod-info .info-box{ position:relative; background:#000; border-radius:16px; padding:24px 28px; min-width:360px; max-width:420px; box-shadow:-12px 0 0px -6px #D52B10; }
.sukod-info .info-row, .sukod-info-item{ display:flex; align-items:center; gap:12px; color:#fff; margin:10px 0; }
.sukod-info .info-row .ico, .sukod-ico{ display:inline-flex; width:18px; height:18px; flex:0 0 18px; }
.sukod-info .info-text, .sukod-info-text{
  color:#fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Arial;
  font-size:16px;
}

/* 6) Enhanced Arrows - Now handled in main arrow section above */

/* 7) Brand logo (mapped) */
.sukod-brand{ position: absolute;
  left: 40px !important;
  right: auto !important;
  bottom: 40px !important;
  width: 180px !important;
  height: 80px !important;
  background: rgba(183, 183, 183, 0.23);
  backdrop-filter: saturate(140%) blur(2px);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  pointer-events: auto;
  
    
}
.sukod-brand img{ max-width:100%; max-height:100%; object-fit:contain; pointer-events:none; }

/* 8) Raise z-index for interactive controls - Fixed hierarchy */
.sukod-overlay{ z-index:10; }
.sukod-right-list{ z-index:50; pointer-events:auto; }
.sukod-right-list .item{ z-index:51; pointer-events:auto; position:relative; }
.sukod-prev, .sukod-next{ z-index:60; pointer-events:auto; position:relative; }

/* 9) Make sure slides occupy full height and prevent jump after transition */
.sukod-slider-track{
  height:100%;
  /* Prevent rendering issues during transitions */
  backface-visibility:hidden;
  perspective:1000px;
  transform-style:preserve-3d;
}
.sukod-slide{
  /* Prevent white screen during slide transitions */
  backface-visibility:hidden;
  transform:translateZ(0);
}
.sukod-slider-root{
  height:846px;
  /* Additional stability */
  contain:layout style paint;
}


/* Gradient overlay for readability */
.sukod-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 80%);
  z-index: 1;
  pointer-events: none;
}

.sukod-left {
  position: relative;
  z-index: 2;
}


/* === Mobile & Tablet (<=991px) overrides === */
@media (max-width: 991px) {

  /* Keep only Title, Description, Button */
  .sukod-short-desc,
  .sukod-info,
  .sukod-brand,
  .sukod-logo,
  .sukod-right-list,
  .sukod-corner {
    display: none !important;
  }

  .sukod-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  .sukod-desc {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  .sukod-slider-btn {
    font-size: 14px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
  }

  /* Reduce white gap under slider */
  .sukod-slider-root {
    height: auto !important;
    padding-bottom: 20px !important;
  }

  /* Arrows smaller and no hover growth */
  .sukod-prev, .sukod-next {
    width: 36px !important;
    height: 36px !important;
    border-width: 2px !important;
  }
  .sukod-prev span, .sukod-next span {
    transform: scale(0.6) !important;
  }
  .sukod-prev:hover, .sukod-next:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}


/* === Mobile & Tablet (<=991px) arrow fix & bottom space === */
@media (max-width: 991px) {

  /* Position arrows side by side */
  .sukod-prev, .sukod-next {
    position: absolute !important;
    bottom: 20px !important;
    top: 20px;
  }
  .sukod-prev { left: 20px !important; }
  .sukod-next { right: 20px !important; }

  /* Reduce white gap */
  .sukod-slider-root {
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
  }
}


/* === Mobile & Tablet (<=991px) font adjust === */
@media (max-width: 991px) {
  .sukod-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  .sukod-desc {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}


/* === Mobile & Tablet (<=991px) description truncate === */
@media (max-width: 991px) {
  .sukod-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2; /* show only 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}


/* === Mobile & Tablet description clamp & title size === */
@media (max-width: 991px) {
  .sukod-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .sukod-desc {
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    max-height: calc(1.4em * 3) !important; /* clamp fallback */
    text-overflow: ellipsis !important;
  }
}

/* Mobil & Tablet düzenlemeleri */
@media (max-width: 1024px) {
  /* Buton gizle */
  .sukod-slider-btn, .sukod-slider-button {
    display: none !important;
  }

  /* Köşeleri düz yap */
  .sukod-slider, .sukod-slider img {
    border-radius: 0 !important;
  }

  /* Alt boşluğu küçült */
  .sukod-slider-wrapper {
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
  }
}

/* Mobil & Tablet için border-radius sıfırlama */
@media (max-width: 1024px) {
  .sukod-slider,
  .sukod-slider img,
  .sukod-slider .slide {
    border-radius: 0 !important;
  }
}

/* Mobil & Tablet için slider köşe yarıçaplarını sıfırla */
@media (max-width: 1200px) {
  .sukod-slider-root,
  .sukod-slider-track,
  .sukod-slider-wrapper,
  .sukod-slide,
  .sukod-media,
  .sukod-media img,
  .sukod-media video {
    border-radius: 0 !important;
  }
}