/* =========================================================
   Custom Elementor Boxes — Spherlogy
   ========================================================= */

.elementor-widget-tgceb_kutu>.elementor-widget-container{height:100%}

/* ===== Kutu ===== */
.tgb-box{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate}
.tgb-box:hover,.tgb-box:focus{text-decoration:none}

/* ===== Görsel ===== */
.tgb-media{position:relative;padding-bottom:69.8%;overflow:hidden}
.tgb-media .tgb-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;
  transform:scale(1);backface-visibility:hidden;transition:transform .7s cubic-bezier(.23,1,.32,1)}
.tgb-box:hover .tgb-img{transform:scale(var(--tgb-zoom,1.08))}

/* Sabit karartma katmanı (varsayılan şeffaf) */
.tgb-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:transparent}

/* Alt gradyan */
.tgb-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;z-index:1;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.75))}

/* ===== Hover katmanı + alt çizgi ===== */
.tgb-hover{position:absolute;inset:0;z-index:2;background:rgba(8,79,156,.75);opacity:0;
  transition:opacity .6s cubic-bezier(.23,1,.32,1)}
.tgb-hover::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:0;background:#5590cf;transition:height .2s}
.tgb-box:hover .tgb-hover{opacity:1}
.tgb-box:hover .tgb-hover::before{height:var(--tgb-bar,4px)}

/* ===== Çember + artı ===== */
.tgb-icon{--s:var(--tgb-icon-size,120px);position:absolute;top:50%;left:50%;width:var(--s);height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);color:var(--tgb-icon,#fff);
  transform:scale(.7);transition:transform .6s cubic-bezier(.165,.84,.44,1)}
.tgb-box:hover .tgb-icon{transform:scale(.9)}
.tgb-icon svg{display:block;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.tgb-arc{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100}
.tgb-box:hover .tgb-arc{stroke-dashoffset:0;transition:stroke-dashoffset .45s linear}
.tgb-l1,.tgb-l2{position:absolute;background:currentColor}
.tgb-l1{left:33.333%;top:calc(50% - 1px);height:2px;width:0}
.tgb-l2{top:33.333%;left:calc(50% - 1px);width:2px;height:0}
.tgb-box:hover .tgb-l1{width:33.333%;transition:width .6s cubic-bezier(.23,1,.32,1) .2s}
.tgb-box:hover .tgb-l2{height:33.333%;transition:height .6s cubic-bezier(.23,1,.32,1) .4s}

/* ===== Başlık ===== */
.tgb-detail{box-sizing:border-box;padding:30px}
.tgb-title{margin:0;color:#fff;font-size:1.52em;line-height:1.15em;letter-spacing:.1px;font-weight:600;
  transition:color .3s ease}

/* Başlık görselin üzerinde */
.tgb-pos-overlay .tgb-detail{position:absolute;left:0;bottom:0;width:100%;z-index:3;pointer-events:none}

/* Başlık görselin altında (ayrı şerit) */
.tgb-pos-below{display:flex;flex-direction:column;height:100%}
.tgb-pos-below .tgb-media::after{display:none}
.tgb-pos-below .tgb-detail{position:relative;flex:1;padding:20px 30px;background:#fff;border-bottom:1px solid #e7e7e7}
.tgb-pos-below .tgb-title{color:#1c1c1c;font-size:1.2em}

/* ===== Dokunmatik ekran: katmanı hep göster (isteğe bağlı) ===== */
@media (hover:none){
  .tgb-touch-visible .tgb-hover{opacity:.85}
  .tgb-touch-visible .tgb-icon{transform:scale(.8)}
  .tgb-touch-visible .tgb-arc{stroke-dashoffset:0}
  .tgb-touch-visible .tgb-l1{width:33.333%}
  .tgb-touch-visible .tgb-l2{height:33.333%}
}

/* ===== Hareket azaltma tercihi ===== */
@media (prefers-reduced-motion:reduce){
  .tgb-img,.tgb-hover,.tgb-icon,.tgb-arc,.tgb-l1,.tgb-l2,.tgb-title{transition:none!important}
}

@media (max-width:900px){
  .tgb-pos-overlay .tgb-detail{padding:25px 30px}
}
@media (max-width:760px){
  .tgb-title{font-size:1.2em}
  .tgb-pos-overlay .tgb-detail{padding:20px}
}