/* ---------------------------------------
   CG Agency Services Tabs (Final v2)
   - Media wrapper: no bg / no border / no shadow
   - Radius on image only
   - Tablist: top padding + left/right borders
   - Panels: height fixed to tallest (no jump)
---------------------------------------- */

.cg-wrap{max-width:1200px;margin:0 auto;}

/* Outer: no border, no shadow */
.cg-card{
  background:transparent;
  border:none !important;
  box-shadow:none !important;
  border-radius:0;
  overflow:visible;
}

/* Header */
.cg-tabs-head{padding:22px 22px 0 22px;}
.cg-tabs-title{
  margin:0 0 6px 0;
  font-size:20px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.2px;
  color:#111;
}
.cg-tabs-sub{
  margin:0 0 14px 0;
  font-size:14px;
  line-height:1.5;
  color:rgba(0,0,0,.62);
}

/* -------------------------------------------------------
   Tab bar
   - MUST have top padding
   - add left/right borders
------------------------------------------------------- */
.cg-tablist{
  display:flex;
  gap:8px;
  overflow:auto;

  /* ✅ üst padding eklendi */
  padding:16px 22px 14px 22px !important;

  /* ✅ üst-alt + sağ-sol border */
  border-top:1px solid rgba(0,0,0,.10);
  border-bottom:1px solid rgba(0,0,0,.10);
  border-left:1px solid rgba(0,0,0,.10);
  border-right:1px solid rgba(0,0,0,.10);

  border-radius:18px;            /* tab bar kutu gibi dursun */
  background:#f7f7f7;
  -webkit-overflow-scrolling:touch;
}

/* Scrollbar */
.cg-tablist::-webkit-scrollbar{height:8px;}
.cg-tablist::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:999px;}

/* Tab buttons */
.cg-tab-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.cg-tab-btn:hover{transform:translateY(-1px);}
.cg-tab-btn.is-active{
  border-color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.cg-tab-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(17,17,17,.18);}

/* -------------------------------------------------------
   Panels: keep height constant (max panel height)
------------------------------------------------------- */
.cg-tab-panels{
  padding:22px 0 0 0;            /* tablist altında biraz nefes */
  display:grid;                  /* height stabilizer */
}

.cg-panel{
  grid-area:1 / 1;
  display:block;                 /* never collapse */
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}

/* JS hidden attribute exists; prevent collapsing height */
.cg-panel[hidden]{display:block !important;}

.cg-panel.is-active{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

/* Layout */
.cg-panel-body{
  display:flex;
  gap:22px;
  align-items:stretch;           /* media matches text height */
}

/* Safety: always image left even if reverse class exists */
.cg-panel-body.is-reverse{flex-direction:row !important;}

/* -------------------------------------------------------
   Media: remove bg/border/shadow, radius on image
------------------------------------------------------- */
.cg-media{
  flex:0 0 44%;
  position:relative;
  overflow:visible;              /* ✅ wrapper clipping kapalı */
  border:none !important;         /* ✅ no border */
  box-shadow:none !important;     /* ✅ no shadow */
  background:transparent !important; /* ✅ no bg */
  min-height:280px;
  align-self:stretch;
  display:flex;
}

/* Image itself carries radius */
.cg-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:10px !important;
  }

/* Eğer “dolu görünüm” istersen (kırpabilir):
   object-fit:cover;
   object-position:center;
*/

/* Text box */
.cg-text{
  flex:1;
  border-radius:18px;
  padding:18px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.cg-text h4{
  margin:0 0 10px 0;
  font-size:16px;
  line-height:1.3;
  font-weight:900;
  color:#111;
  letter-spacing:.2px;
}
.cg-text p{
  margin:0 0 12px 0;
  font-size:15px;
  line-height:1.75;
  color:#222;
}
.cg-text p:last-child{margin-bottom:0;}

/* Responsive */
@media (max-width: 900px){
  .cg-tabs-head{padding:18px 16px 0 16px;}
  .cg-tablist{
    padding:14px 16px 12px 16px; /* üst padding mobilde de var */
    border-radius:16px;
  }
  .cg-tab-panels{padding:16px 0 0 0;}

  .cg-panel-body{flex-direction:column;}
  .cg-media{min-height:220px; flex:0 0 auto;}
  .cg-img{border-radius:16px;}
  .cg-text{padding:16px;border-radius:16px;}
}

@media (max-width: 600px){
  .cg-tablist{padding:12px 14px 10px 14px;}
  .cg-tab-panels{padding:14px 0 0 0;}
  .cg-text{padding:14px;}
}


/* ---------------------------------------
   CG Major Ports (Widget)
---------------------------------------- */

.cg-ports .cg-ports-head{
  padding:18px 0 12px 0;
}

.cg-ports-title{
  margin:0 0 6px 0;
  font-size:20px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.2px;
  color:#111;
}

.cg-ports-sub{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:rgba(0,0,0,.62);
}

.cg-ports .cg-ports-body{
  padding:8px 0 0 0;
}

.cg-port-row{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-top:1px solid rgba(0,0,0,.10);
}

.cg-port-row:first-child{
  border-top:none;
  padding-top:10px;
}

.cg-port-name{
  flex:0 0 180px;
  font-weight:900;
  letter-spacing:.3px;
  color:#111;
  font-size:13px;
  text-transform:uppercase;
}

.cg-port-desc{
  flex:1;
  font-size:15px;
  line-height:1.65;
  color:#222;
}

/* Responsive */
@media (max-width: 900px){
  .cg-port-name{flex:0 0 140px;}
}

@media (max-width: 600px){
  .cg-port-row{flex-direction:column;gap:6px;}
  .cg-port-name{flex:auto;}
}